CSS Grid image gallery in under 10 minutes

In this tutorial, we’ll use the CSS grid to create a classic three-column responsive image gallery. We’ll go through some very basic properties related to it. This is a beginner level tutorial and barely scratches the surface of what you could do with it. Before we begin, let’s refresh our understanding of CSS grid.

What is CSS Grid?

  • It is a display property. Using it is as simple as
    div{ display: grid; }
  • It converts your element into a grid and lets you place elements inside and/or across the cells of this grid.css grid simple example
  • A good example of where it can really shine is an image gallery or a product listing on a shopping website.
  • What makes the grid a hot commodity in the CSS market is that it has made the lives of developers a lot easier. What used to be done using tables, float and arbitrarily added padding can now be achieved easily using the grid. Making a layout responsive is unbelievably easy too!

Now then, let’s get started!

Step 1:

Set up your HTML. I’ve created an unordered list with an id #gallery and added 9 list items that contain images.

 

<body>

    <ul id="gallery">

        <li><img src="1.jpeg"></li>

        <li><img src="2.jpeg"></li>

        <li><img src="3.jpeg"></li>

        <li><img src="4.jpeg"></li>

        <li><img src="5.jpeg"></li>

        <li><img src="6.jpeg"></li>

        <li><img src="7.jpeg"></li>

        <li><img src="8.jpeg"></li>

        <li><img src="9.jpeg"></li>

    </ul>

</body>

With that out of the way, we can start working on the real stuff. Let’s head to our stylesheet.

Step 2:

In your stylesheet, declare the display property for #gallery as grid. If you now go to Developer tools (Select F12 on your keyboard), to the Elements tab, and the <ul id=gallery> element. You can see a dotted border around this. This simply indicated that the browser now identifies this as a grid element.

 

img{

    /* to ensure that the images are contained within their grid cells */
    width: 100%; 

}

#gallery{

    /* cosmetic css, resetting defaults for a ul element 

    it's alright if you do not include this. */

    list-style: none;

    padding: 0px;

    /* grid details */

    display: grid;
}

 

Step 3:

We define the number of columns we want this grid to have. For this, we use the grid-template-columns property. grid-template-columns is used to define the columns of your grid. You can use pixel widths, fractional units, or auto.

Since all three columns are going to be identical, let’s use repeat(3, 1fr). This basically means, repeat the column of 1 fractional unit thrice. Look how compact and elegant this is! To fully appreciate the beauty of this, head back to the Developer tools. Select <ul id=gallery> element. On the right, in the Styles tab, you should have grid-template-columnsrepeat(3, 1fr);. Try changing the 3 to 2 or 4, the number of columns changes. Now, instead of 1fr, try using 100 px. This fixes the width of each column to 100 px as opposed to earlier where the columns stretched to occupy entire width. The great thing is, it keeps the width of all your columns equal (unless you specify otherwise).

If the images seem to be too close together, add grid-column-gap: 10px; and grid-row-gap: 10px;. These, as their names suggest, add a specified gap between columns and rows respectively. Your styles for #gallery should look like this

 

#gallery{ 

    /* cosmetic css, resetting defaults for a ul element 

    it's alright if you do not include this. */ 

    list-style: none;

    padding: 0px;

    /* grid details */

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-column-gap: 10px;

    grid-row-gap: 10px;

}

And that’s it. you’re done. Your image gallery in the form of a 3 column grid is ready. Has it been 10 minutes, yet? Hardly! Let’s go ahead and make this gallery responsive.

Step 4:

Making a grid responsive is just a matter of changing the number of columns in your grid-template-columns. We will consider break-points 1024 px and 768 px.

@media screen and (max-width: 1024px){

    #gallery{

        /* for iPad landscape, the gallery will have 2 columns */

        grid-template-columns: repeat(2, 1fr);

    }

}

@media screen and (max-width: 768px){

    #gallery{

        /* for iPad landscape, the gallery will have 2 columns */

        grid-template-columns: 1fr;

    }

}

Congratulations! You’ve just created your own responsive image gallery. You this approach you can build a product listing page as well. Go ahead, give it a try.

Conclusion:

CSS grid is a great tool to create, well, grid-based components very easily. Making grids responsive isn’t all that tough either. Also, it has lots more to offer. For e.g. grid-template-areas let you easily set and modify the layout of a component. I’ve seen tutorials attempting to create the layout of entire websites using CSS grid. You could consider the layout as a grid and place your headers, and wrappers, and footers in this grid. But is it a good approach? We’ll cover this in one of the future tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *