CSS Grid is super powerful and can be used to create some creative layouts which makes it a great way to create galleries. In this guide we’re going to use a simple grid that keeps the images the same size.
Here are the requirements for this component:
- Accepts an array of images (using Gatsby Image)
- Needs to respond to different size screens (using
- Takes a size prop of
Cool, let’s start building it out. We're building this one based on a query for Gatsby Image. You can set this up for any image component or element that you may be using.
The wrapper styles will give the children their sizes based on the grid and row declarations. In this case we have
gridTemplateColumns: ‘repeat(auto-fill, minmax(300px, 1fr))’ Which tells the images to lay out in as many columns that will fit based on a minimum width of
300px and a maximum of
gridGap tells them to have a gap of
1rem between images.
We'll add a function that can handle the different sizing from the
size prop and pass these into the wrapper styles.
We can now pass our size changes to the gallery component. Cool!
Now, let's type it. This will help us and others know what we shape we need passed to the gallery.
Nice! Now we have a functioning gallery component that can change sizes. You can see my implementation of this on the illustration page.