Three column responsive image gallery using CSS

How to make a simple slide down hamburger menu using CSS and jQuery. Code with demo and free download.

In this tutorial I'll show you how to make a three column responsive image gallery using CSS.

When the user's screen width is less than 900px wide, the gallery is split into two columns and when the user's screen width is less than 360px wide, the gallery is then displayed with one column.
This is achieved with Media Queries.

I will also show you how to crop the images to a perfect responsive square, with the height based on the image percentage width.

The CSS:

This will need to go preferably in your style sheet, or else in your document head between the style tags.

First we'll create a containing div with the id 'gallery' and add a 40px margin top and bottom to give the gallery space above and below.

/* The gallery container div: */
#gallery{
position:relative;
margin:40px 0;
}

Then we need to create an image container that can be repeated for each image.

The image container is where we set the responsive percentage width and padding.
The padding sets the spacing between the images.
For the main part of our stylesheet, screens above 900px wide, the width is set at 31.33%, while the image container has a padding of 1%.
For three images in a row, 31.33% each and 1% padding left and right of each, all together it adds up to 99.99%, which rounds up to 100%. Perfect.

To snap our image containers inline, we float them to the left and add the alignment 'left:0':

/* The image container class: */
.img-container{
width:31.33%;
padding:1%;
float:left;
left:0;
}

Now we need to add another container inside the image container with a height and padding of 0, after which we add bottom padding of 100%.
That is the trick that matches the height to the percentage width, giving us our perfect responsive squares.
Then we 'crop' the image within the container by hiding the overflow:

/* The image container inner container: */
.img{
height:0;
padding:0;
padding-bottom:100%;
overflow:hidden;
}

Next we need to oversize the images and position them using 'transform'.
For this step you can add individual ids or classes to each image to size and position them individually, but this just a 'One size fits all' solution.
You can also use image editing software to crop square thumbnails and use those with 'height:auto' and 'width:100%' instead, leaving out the 'transform' settings.

/* The image itself: */
.img img{
width:195%;
height:auto;
transform:translate(-25%,-7%);
-moz-transform:translate(-25%,-7%);
-webkit-transform:translate(-25%,-7%);
-ms-transform:translate(-25%,-7%);
}

Because the images above are floated left, we need to add a clear fix class before the closing tag of our #gallery container:

.clearfix{
clear:both;
}

Lastly, using Media Queries we edit the width and padding to achieve one column for screens under 360px wide and two columns for screens between 360px and 900px wide:

/* MEDIA QUERIES */

/* One column */
@media only screen and (max-width: 360px){
.img-container{
width:98%;
padding:2% 1%;
}
}

/* Two columns */
@media only screen and (min-width: 360px) and (max-width: 900px){
.img-container{
width:48%;
padding:1%;
}
}

The HTML:

Include this in the head section of your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Then we add the gallery inside the main container of our website layout:

I hope you have enjoyed this tutorial and have found it useful.

If you would like to make the same responsive gallery with pagination, try out the tutorial below: