Gatsby Book Launch

“The missing guide to the modern web” launches on Thursday, Sep 29th: Modular: The Web’s New Architecture

ContactSign Up for Free
Community Plugin
View plugin on GitHub

gatsby-remark-images-grid


gatsby-remark-images-grid


Npm version Npm downloads MIT license PRs welcome


Important: This fork supports the newest versions of Gatsby 3.x/4.x 😀

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

Note: If you use others images remark plugins, put gatsby-remark-images-grid-v4 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

© 2022 Gatsby, Inc.