Creating Responsive Tiled Layouts

Introduction

In this lab, we will learn how to create a 3-tile layout using display: inline-block. You will use width and calc to evenly divide the container into 3 columns and set font-size to avoid whitespace. By the end of this lab, you will have a better understanding of how to create a clean and responsive tiled layout without using float, flex or grid.

Skills Graph

3-Tile Layout

index.html and style.css have already been provided in the VM.

To create a 3-tile layout, use display: inline-block instead of float, flex, or grid. Use width in combination with calc to divide the width of the container evenly into 3 columns. To avoid whitespace, set font-size to 0 for .tiles and to 20px for <h2> elements to display the text. Note that using font-size: 0 to fight whitespace between blocks might cause side effects if you use relative units (e.g. em).

<div class="tiles">
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
</div>

.tiles {
  width: 600px;
  font-size: 0;
  margin: 0 auto;
}

.tile {
  width: calc(600px / 3);
  display: inline-block;
}

.tile h2 {
  font-size: 20px;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the 3-Tile Layout lab. You can practice more labs in LabEx to improve your skills.