andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix 3-tile layout

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 12:05:22 +03:00
parent 8652ac9752
commit 2b8884280b
1 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
snippets/tile-layout-using-inline-block.md
View File

@ -8,28 +8,29 @@ Align items horizontally using `display: inline-block` to create a 3-tile layout
```html
<div class="tiles">
<div class="tile">
<img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" >
<h2 class="tile_title">30 Seconds of CSS</h2>
<img src="https://via.placeholder.com/200x150">
<h2>30 Seconds of CSS</h2>
</div>
<div class="tile">
<img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" >
<h2 class="tile_title">30 Seconds of CSS</h2>
<img src="https://via.placeholder.com/200x150">
<h2>30 Seconds of CSS</h2>
</div>
<div class="tile">
<img class="tile_image" src="https://via.placeholder.com/250x150" alt="placeholder" >
<h2 class="tile_title">30 Seconds of CSS</h2>
<img src="https://via.placeholder.com/200x150">
<h2>30 Seconds of CSS</h2>
</div>
</div>
```
```css
.tiles {
width: 900px;
width: 600px;
font-size: 0;
margin: 0 auto;
}
.tile {
width: calc(900px / 3);
width: calc(600px / 3);
display: inline-block;
}
@ -47,5 +48,3 @@ Align items horizontally using `display: inline-block` to create a 3-tile layout
- Set `font-size: 20px` to `h2` in order to display the text.
#### Browser support
- https://www.caniuse.com/#search=inline-block