Creating a Responsive Image Grid with CSS

Graphics are integral to websites and creating a grid of images is increasingly becoming commonplace as clickable tiles that direct you to further web pages. This tutorial walks you through creating a mobile responsive grid of clickable images for your website using simple CSS.

Below is the HTML, CSS, and JavaScript required.

Step 1 — Add the HTML below to where you’d like to place your grid

<ul>
<li class="feature">
<a href="#">
<img src="https://www.solodev.com/assets/responsive-tiles/product1a.png" />
</a>
</li>
<li class="two">
<a href="#">
<img src="https://www.solodev.com/assets/responsive-tiles/product2a.png" />
</a>
</li>
<li>
<a href="#">
<img src="https://www.solodev.com/assets/responsive-tiles/product3a.png" />
</a>
</li>
</ul>

Step 2 — Add the CSS below to the main stylesheet of your website

ul {
font-size: 0;
list-style: none;
width: 100%;
padding-left: 0px;
}
ul li {
background: #A9A9A9;
display: inline-block;
width: 33.3%;
}
ul li:hover {
background: #cdc8c8;
}
ul li img {
opacity: 0.5;
width: 100%;
}
ul li.feature {
background: #708090;
float: left;
width: 66.6%;
}
ul li.feature:hover {
background: #95a4b2;
}
ul li.two {
background: #2F4F4F;
}
ul li.two:hover {
background: #668989;
}
@media (max-width: 640px) {
ul li {
width: 100%;
}
ul li.feature {
width: 100%;
}
}
Replace the images and colors with those that fit your business

Demo on JSFiddle

Download from GitHub

Originally Posted here on the Solodev Web Design Blog

Get daily web design tutorials in your inbox by subscribing to the Solodev Blog at solodev.com/blog/!

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.