---
title: "Discussion on \"Creating a Custom Photo Gallery using Gatsby.js and CSS Grid\" | Hashnode"
description: "Discussion on \"Creating a Custom Photo Gallery using Gatsby.js and CSS Grid\". Hey, there!\nI have recently built a gallery for my personal website and I'd like to share some of the knowledge I acquired.\nIn this post we will be developing a Photo Gallery, from adding a directory with pictures and querying them in GraphQL to disp..."
url: "https://hashnode.com/posts/creating-a-custom-photo-gallery-using-gatsbyjs-and-css-grid/5e83c7748570b09f3cacde7c"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Creating a Custom Photo Gallery using Gatsby.js and CSS Grid](https://engineering.belchior.me/creating-a-custom-photo-gallery-using-gatsbyjs-and-css-grid?utm_source=hashnode&utm_medium=feed)

Hey, there! I have recently built a gallery for my personal website and I'd like to share some of the knowledge I acquired. In this post we will be developing a Photo Gallery, from adding a directory with pictures and querying them in GraphQL to disp...

Mar 31, 2020 · 7 min read · engineering.belchior.me  
Updated Jul 31, 2025  
Read the article

-   [#css-grid](https://hashnode.com/tag/css-grid)
-   [#gatsby](https://hashnode.com/tag/gatsby)
-   [#reactjs](https://hashnode.com/tag/reactjs)

## Written by

[Bernardo Belchior](https://hashnode.com/@belchior)

@belchior · Porto, Portugal

  
[View profile](https://hashnode.com/@belchior)

Software Development Engineer @ Rows

Hey, I'm Bernardo, a software engineer currently living in Porto. I enjoy building web applications using React and TypeScript.

## Responses 1

Markdown supported · ⌘↵ to post

[Ojonugwa Justice Alikali](https://hashnode.com/@Ojonugwa)

[Sep 26, 2020](https://hashnode.com/posts/creating-a-custom-photo-gallery-using-gatsbyjs-and-css-grid/5e83c7748570b09f3cacde7c/comment/5f6f4464ade1fb598d43a0a0)

Nice article, it was really helpful... though I noticed that onclick on any of the pictures on your personal blog it displays the image in modal view, how can that be achieved?

[Bernardo Belchior](https://hashnode.com/@bernardobelchior)

[Sep 28, 2020](https://hashnode.com/posts/creating-a-custom-photo-gallery-using-gatsbyjs-and-css-grid/5e83c7748570b09f3cacde7c/comment/5f6f4464ade1fb598d43a0a0#reply-5f72276340fb187c4fe5a20c)

Thank you!

I didn't include that in this article as to not make it too long. Nevertheless, you can achieve the Modal by adding an `onClick` handler to each image. That handler should set a `src` variable which is that image's URL. When the `src` variable is defined, then a new `<div>` should be rendered with `position: fixed` and a almost black background. This new `<div>` should contain the image in a bigger size.

Hopefully this was clear enough, if not DM me on Twitter and I can try to help further :)

[Less Dusan](https://hashnode.com/@Less17)

[Jan 19, 2021](https://hashnode.com/posts/creating-a-custom-photo-gallery-using-gatsbyjs-and-css-grid/5e83c7748570b09f3cacde7c/comment/5f6f4464ade1fb598d43a0a0#reply-60071f94094f2b30301ddee1)

[Bernardo Belchior](https://hashnode.com/@bernardobelchior)  
Hi Bernardo, interesting sample! just following up your note above... Could you pls post few lines of code how onClick=... works for modal? My simple handler isn't fired.

Thx a lot!

[John McAulay](https://hashnode.com/@johnnyboy1981)

[May 9, 2021](https://hashnode.com/posts/creating-a-custom-photo-gallery-using-gatsbyjs-and-css-grid/5e83c7748570b09f3cacde7c/comment/5f6f4464ade1fb598d43a0a0#reply-6098263121068818a5c62c0e)

[Bernardo Belchior](https://hashnode.com/@bernardobelchior)

I had some good luck integrating this tutorial with **simple-react-lightbox** just had to change around some of the CSS to account for the extra div it adds to the output:

.gallery > div { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 16vw; grid-gap: 1em; }

.gallery > div > \* { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19); }

.gallery > div > :hover { filter: drop-shadow(8px 8px 8px gray); transition: all ease 0.5s; cursor: pointer; }

.gallery > div > :nth-child(6n + 3) { grid-column: span 1; grid-row: span 2; }

.gallery > div > :nth-child(6n + 2), .gallery > div > :nth-child(6n + 5), .gallery > div > :nth-child(6n + 6) { grid-column: span 2; grid-row: span 2; }