Real World Performance: lazy loading, optimizing media, faster analytics join us Wednesday

ContactSign Up
Community Plugin
View plugin on GitHub



Npm version Npm downloads MIT license PRs welcome

gatsby-remark-images-grid create a <figure> tag for you containing:

  • A responsive CSS grid with your images
  • A <figcaption> tag, optionally

You can, of course, choose the maximum columns number. Layout will be responsive and display less columns with small screens.


Getting started


You can download gatsby-remark-images-grid from the NPM registry via the npm or yarn commands

yarn add gatsby-remark-images-grid
npm install gatsby-remark-images-grid --save


  1. Add the plugin in your gatsby-config.js file:
module.exports = {
    plugins: [
            resolve: "gatsby-transformer-remark",
            options: {
                plugins: [
                    // Make CSS grids available
                    // without options
                    // or
                    // with options
                        resolve: "gatsby-remark-images-grid",
                        options: {
                            className: "myCustomClassName",
                            gridGap: "20px",
                            margin: "20px auto",

Note: If you use others images remark plugins, put gatsby-remark-images-grid first because images are not images nodes before being wrapped by a grid

  1. Use grid layout in your markdown
  • Use the markdown code syntax
  • Use grid for the lang followed by the number of columns you want and the caption (optional) separated by a pipe (|)
```grid|2|My super images!




Name PropType Description Default Example
className string Custom className “gatsbyRemarkImagesGrid” “myCustomClassName”
gridGap string Grid gap (horizontal and vertical) - “20px”
margin string Margin around grid - “20px auto”


  • ⇄ Pull/Merge requests and ★ Stars are always welcome.
  • For bugs and feature requests, please create an issue.

See guidelines




This project is licensed under the MIT License - see the file for details

© 2023 Gatsby, Inc.