CSS: create a responsive image grid

In this article we will see how to create a responsive CSS image grid.

We want a really simple HTML structure for our gallery, so we start with the following markup.

<section id="grid">
    <figure>
        <img src="image-1.jpg" alt="">
    </figure>
    <figure>
        <img src="image-2.jpg" alt="">
    </figure>
    <figure>
        <img src="image-3.jpg" alt="">
    </figure>
    <figure>
        <img src="image-4.jpg" alt="">
    </figure>
    <figure>
        <img src="image-5.jpg" alt="">
    </figure>
    <figure>
        <img src="image-6.jpg" alt="">
    </figure>
</section>

The first styles we're going to apply simply center the gallery section within the viewport.

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Our next styles will display a grid made up of three columns. In order to accomplish this task, each column will have a width specified in percentage.

#grid {
    max-width: 1024px;
    display: grid;
    grid-template-columns: 33.333% 33.333% 33.333%;
}

The final step is to make our images responsive by using the following CSS styles.

#grid figure {
    margin: 0;
    padding: 0;
}

#grid img {
    display: block;
    max-width: 100%;
    height: auto;
}

Demo

CSS: image grid