Creating a Responsive Image Grid with CSS

This tutorial walks you through creating a mobile responsive grid of images for your website using simple 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%;
  }
}