3-tile layout
CSS, Layout · Dec 30, 2020
Aligns items horizontally using display: inline-block to create a 3-tile layout.
- Use
display: inline-blockto create a tiled layout, without usingfloat,flexorgrid. - Use
widthin combination withcalcto divide the width of the container evenly into 3 columns. - Set
font-sizefor.tilesto0to avoid whitespace and to20pxfor<h2>elements to display the text. - Note: If you use relative units (e.g.
em), usingfont-size: 0to fight whitespace between blocks might cause side effects.
Preview
30 Seconds of CSS
30 Seconds of CSS
30 Seconds of CSS
<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;
}
