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

Revamp snippet descriptions

Browse Source
This commit is contained in:
Chalarangelo
2020-12-30 15:37:37 +02:00
parent 27bae0477f
commit 16a4e06e85
59 changed files with 341 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,15 +3,12 @@ title: 3-tile layout
tags: layout,beginner
---
Align items horizontally using `display: inline-block` to create a 3-tile layout.
Aligns items horizontally using `display: inline-block` to create a 3-tile layout.
- Use `display: inline-block` to create a tiled layout, without using `float`, `flex` or `grid`.
- `.tiles` is the container component, `.tile` is an item that needs to be displayed inline.
- Use `width: calc((900px / 3))` to divide the width of the container evenly into 3 columns.
- Set `font-size: 0;` on `.tiles` to avoid whitespace.
- Set `font-size: 20px` to `h2` in order to display the text.
- Note: If you use relative units (e.g. `em`), using `font-size: 0;` to fight whitespace between blocks might cause side effects.
- Use `width` in combination with `calc` to divide the width of the container evenly into 3 columns.
- Set `font-size` for `.tiles` to `0` to avoid whitespace and to `20px` for `<h2>` elements to display the text.
- **Note:** If you use relative units (e.g. `em`), using `font-size: 0;` to fight whitespace between blocks might cause side effects.
```html
<div class="tiles">