Weekly Webtips
Published in

Weekly Webtips

How To Create An Image Gallery With CSS Grid

In today’s article, we will explore how we can implement an Image Gallery with mostly CSS Grid.

Image Gallery is a great user interface because it allows you to group all the photos in one area. It also provides a great user experience because the user will be able to view all the photos in a single view.

Here’s an example of it:

https://www.socialmediaexaminer.com/wp-content/uploads/2015/08/ds-tripadvisor-album.jpg

Image Gallery adjusts the layout depending on the number of images. The maximum it can show in the foreground in this example is 4 images. Then the rest is hidden.

Structuring Our Markup

Let us now design our HTML so that we will have an idea of what it will look like.

https://codesandbox.io/s/agitated-yalow-sf1lm7?file=/index.html

With this HTML markup, we can now get the idea of how are we going to populate it, how we are going to design it and how the data will flow. That’s important!

We have 6 gallery items, and what we want to accomplish is to show 4 images and hide the rest. In the 4th or last image, we have a “+” overlay on it.

We will show more examples with it but that is the basic structure of it.

We will also not add JavaScript to this tutorial to keep it pure with CSS Grid. Let me know if you wish to!

Styling It

Now that we have the structure on hand, let us now starting styling it!

https://gist.github.com/jmaicaaan/04df544a52d5860390a4bbbca206bd96#file-style-css

We created a class three-cols-gallery so that other images can expand from start to end. Check out the first image, it was able to “span” from the first column until the end.

With CSS Grid, you think mostly in columns and rows on how you will achieve such a design.

To display the “+6 See More”, we add a data attribute in the markup

and we retrieve it from the CSS. We use that approach so that when you integrate it with some JavaScript you can add dynamic value to it! It’s all ready.

To summarize the idea, we use CSS Grid so we can think and apply thinking in “columns” and “rows”. With that, we are able to span a gallery item depending on the requirement. In our case, we were able to span the first item from the first column up to the last column.

We use the nth-of-type selector to “grab” the gallery item from the CSS. Through that, we were able to control each gallery item if we are going to show them or hide.

Lastly, we use pseudo ::after to retrieve a dynamic value from the markup itself and also to add overlay in the gallery item. Very clever!

Bringing It All Together

We’ve implemented now the Image Gallery with CSS Grid! This UI design is a great opportunity to show how many things you can do with CSS Grid! Here’s the source of it. Play around it and let me know! I have left a small thing for you there to fix and explore, heh.

Sandbox URL: https://codesandbox.io/s/agitated-yalow-sf1lm7

A lot of people have done amazing things with CSS Grid and if I’ve helped you get more curious, be sure to check around some designs and try to do it!

If you’re also interested in reading another CSS Grid article, I’ve written another article about it check it out here:

Let me know what you think about this or if you have any questions!

Happy coding!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store