Aligns items horizontally using display: inline-block
to create a 3-tile layout.
display: inline-block
to create a tiled layout, without using float
, flex
or grid
.width
in combination with calc
to divide the width of the container evenly into 3 columns.font-size
for .tiles
to 0
to avoid whitespace and to 20px
for <h2>
elements to display the text.em
), using font-size: 0
to fight whitespace between blocks might cause side effects.<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;
}
CSS, Layout
Vertically and horizontally centers a child element within its parent element, using display: table
.
CSS, Layout
Displays a menu overlay when the user hovers over the image.
CSS, Layout
Creates a masonry-style layout that is especially useful when working with images.