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

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-images-grid"
                    // 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

2. 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!
![](../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