Skip to main content
View plugin on GitHub
See starters using this

gatsby-remark-images-grid

npm package

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.

example

Getting started

gatsby-remark-images-grid

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

Usage

  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
                    "gatsby-remark-grid"
                    // or
                    // with options
                    {
                        resolve: "gatsby-remark-grid",
                        options: {
                            className: "myCustomClassName",
                            gridGap: "20px",
                            margin: "20px auto",
                        },
                    },
                ],
            },
        },
    ],
}

Note: If you use others images remark plugins, put gatsby-remark-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!
![](../photo1.jpg)
![](../photo2.jpg)
```

```grid|3
![](../photo3.jpg)
![](../photo4.jpg)
![](../photo5.jpg)
```

```grid|4
![](../photo6.jpg)
![](../photo7.jpg)
![](../photo8.jpg)
![](../photo9.jpg)
```

Props

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”

Contributing

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

See CONTRIBUTING.md guidelines

Changelog

See CHANGELOG.md

License

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