gatsby-remark-images-grid

gatsby-remark-images-grid

---

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

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