Mini Tutorial: Responsive Image Grid Using Only CSS (Cross-browser compatible)

In the context of this post I will be using the terms ‘fully responsive’ and ‘half responsive’ as I find them to be appropriate and intuitive definitions.

Fully responsive: No set sizes on anything. The size of the element depends entirely on the size of the window, with no max or min width.

Half responsive: Responsive up to a certain size. 

I may have found a hole in the information available online and decided to contribute by filling it in. What makes this tutorial different from the rest is that I will be teaching you how to make a fully responsive image grid with responsive content around it, as opposed to one single half responsive image.

We will be working with the following  HTML structure:

<div class="page">
This is my header
<div class="img-grid">
<div class="img-wrapper img-wrapper1">
<div class="img-container">
                    <img src="images/nature_hires.jpg" alt="responsive image" /></div>
</div>
<div class="img-wrapper img-wrapper2">
<div class="img-container">
                    <img src="images/nightlife_hires.jpg" alt="responsive image" /></div>
</div>
<div class="img-wrapper img-wrapper3">
<div class="img-container">
                    <img src="images/nature2_hires.jpg" alt="responsive image" /></div>
</div>
<div class="img-wrapper img-wrapper4">
<div class="img-container">
                    <img src="images/nightlife2_hires.jpg" alt="responsive image" /></div>
</div>
</div>
This is my footer
</div>

– To get straight to the point I will give you the full CSS sheet, and then I will explain it all step by step.

.page {
		width:90%;
		}
	header {
		width: 100%;
        height: auto;
		background-color: #ddd;
		color: #5f5f5f;
		padding-top: 30px;
        padding-bottom: 30px;
		}
	footer {
		width: 100%;
        height: auto;
		background-color: #ddd;
		color: #5f5f5f;
		padding-top: 30px;
        padding-bottom: 30px;
		float:left;
		margin-top:.5%;
		}
	.img-grid {
		width:100%;
		margin:0 auto;
		margin-top:.5%;
	}
	.img-wrapper1 {
		display:inline-block;
		width:50%;
		position:relative;
		float:left;
	 }
	 .img-wrapper1 .img-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	 }
	 .img-wrapper2 {
		display:inline-block;
		width:50%;
		position:relative;
		float:left;
	 }
	 .img-wrapper2 .img-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	 }
	 .img-wrapper3 {
		display:inline-block;
		width:50%;
		position:relative;
		float:left;
	 }
	 .img-wrapper3 .img-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	 }
	 .img-wrapper4 {
		display:inline-block;
		width:50%;
		position:relative;
		float:left;
	 }
	 .img-wrapper4 .img-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	 }
	 img {
		width:100%;
	 }
	 .img-wrapper:after {
	 	content:"";
	 	padding-top:100%;
		display:block;
	 }
	 /*Extra step*/
	 .img-wrapper {
		width: 49.75%;
	 }
	 .img-wrapper2 {
		margin-left:.5%;
	 }
	 .img-wrapper3 {
		margin-top:.5%;
	 }
	 .img-wrapper4 {
		margin-top:.5%;
		margin-left:.5%;
	 }

Step 1: Set your widths

All our measurements will be in percentages (absolutely necessary for responsive design). If you want your image grid to fill up your entire browser window then set your page’s width to 100%. In this tutorial we will set it to only 90% of the page. If you would like it to be centered then margin:0 auto; will do the trick.

.page {
	width:90%;
}
.img-grid {
	width:100%;
	margin:0 auto;
	margin-top:.5%;
}

Step 2: Style your image wrappers

I’m using both float:left; and display:inline-block just to show you different options, but they both do the same (stack our images side by side). We shall set the position to relative because the div inside this wrapper will we set to absolute position later on. And lastly we need to give our images a width percentage that should add up to 100% per row. In this case we want two images per row so we will set them all to 50%, which will make them fit nicely and proportionately together. If you have different sized images you will need different widths and a different class for each in order to target them.

.img-wrapper {
	display:inline-block;
	width:50%;
	position:relative;
	float:left;
}

Step 2

Step 3: Position your image containers

Here’s where we use position:absolute; and in order to fit this container perfectly in its parent div we will have to set all top, bottom, left and right to 0. Our images will hide behind each other, but we will fix that soon.

.img-wrapper .img-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

Step 3

Step 4: Make your images responsive

Easy step, just add a 100% width to your images. Don’t forget to have images with a high resolution to avoid blurriness at big scales (see image)

img {
	width:100%;
}

Quality comparisson

Step 5: The final trick

A great way to fake a responsive height is by using padding-top and setting it to 100%. We will need to use display block here as well, but all of this will only work if and when we use the pseudo-element :after, and make sure it’s all after the content:””; . If you would like this explained further, take a look at the design shack article, they did an great job at it.

.img-wrapper:after {
	content:"";
	padding-top:100%;
	display:block;
}

Image grid

Step 6: Make it look better (extra step)

To make our grid look nicer we should add some margin in-between our images. Remember to always use percentages for this so that the spacing stays proportionate at any size. Also, don’t forget that all percentages in one row should add up to 100% including margins. In this example we want our margins to be .5% so our image wrappers will have to be 49.75% each. This is where our extra classes come in handy.

.img-wrapper {
	width: 49.75%;
 }
.img-wrapper2 {
	margin-left:.5%;
}
.img-wrapper3 {
	margin-top:.5%;
}
.img-wrapper4 {
	margin-top:.5%;
	margin-left:.5%;
}

Fully responsive image grid

And voila! You now have a fully responsive image grid to use in many different situations. Hope you fond this tutorial useful. Cheers!

Download sample files here.