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",
},
},
],
},
},
],
}

Should be

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",
},
},
],
},
},
],
}

Got this working, worked first time! Thanks.
I was wondering how difficult it would be to make the side by side images smaller, something like being able to specify the maxWidth used by GatsbyImage.

Hi. The plugin doesn't seem to work with amsterdam-theme. It's quite a popular theme so would be nice to figure out why the plugin doesn't trigger the grid after adding the plugin to the gatsby-config and rebuilding. Attached a screenshot of current behaviour.

Hi!
I couldn't make this plugin work here.
Has anyone managed to make this work in conjunction with gatsby-remark-images? I'm wondering it might be a compatibility problem.

I've followed the guide and put it before any other image plugins:

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: "gatsby-remark-images-grid",
        options: {
          gridGap: "2rem",
        },
      },
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 1036,
          linkImagesToOriginal: false
        },
      },
      'gatsby-remark-smartypants',
      `gatsby-remark-reading-time`,
      'gatsby-remark-component',
    ],
  },
},

Here's how it looks like in the markdown code:

```grid|4|test
![](./day2-dev.jpg)
![](./day2-dev2.jpg)
![](./day2-meeting.jpg)
![](./day2-team.jpg)

Here's how the final result looks like when inspected:

--

Full project code can be find here: https://github.com/cmdalbem/portfolio

What would be the best way to have the grid remain on mobile, rather than falling back to a single column?

Any thoughts on the best way to have functionality similar to what is provided by:

https://github.com/Jakst/gatsby-remark-images/blob/master/index.js#L161

That works with the grid? Happy to hack away at it, but wanted to know if there were thoughts about how to best provide that.

I'd like to include a link in the caption for my image grid.

I've tried

```grid|2|Caption with a <a href="/dest">link</a> and another ![link](/dest2)
![](image1)
![](image2)
```

but the caption is rendered with the code in text:

Caption with a <a href="/dest">link</a> and another ![link](/dest2)

Ideally at least the HTML would be processed as HTML in the rendered output.

Not sure when this started happening, but it looks like the rendered output of this module does not handle the caption properly anymore.

For example, if you have the following in your markdown document:

![](../photo1.jpg)
![](../photo2.jpg)

The grid will render with the two images, but the caption will only include "My", ignoring everything else.

Poking around, it looks like the full caption is no longer included as part of node.lang that's used here: https://github.com/xuopled/gatsby-remark-images-grid/blob/master/src/index.js#L6

Instead, anything after the first space is put into node.meta. I've forked this and fixed it by just naively concatenating the two fields, but I'm not sure if you want to investigate something more robust. Might be worth identifying why the behaviour of node.lang changed in the first place.

Here's my "hotfix":
BruOp@517daee