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
  2. Use the markdown code syntax
  3. 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