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;
}