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

Update and rename remove-inline-block-container-white-space.md to tile-layout-using-inline-block.md

Browse Source
This commit is contained in:
Angelos Chalaris
2019-10-02 09:51:59 +03:00
committed by GitHub
parent 184592b01d
commit ac36405496
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
snippets/remove-inline-block-container-white-space.md → snippets/tile-layout-using-inline-block.md
View File

@ -1,9 +1,9 @@
---
title: Remove inline-block container whitespace
title: 3-tile layout
tags: layout,beginner
---
Creates a bouncing loader animation.
Align items horizontally using `display: inline-block` to create a 3-tile layout.
```html
<div class="tiles">
@ -40,11 +40,11 @@ Creates a bouncing loader animation.
#### Explanation
1. `tiles` is the container of the tile component
2. `tile` is the item that we need to display inline
3. `width: calc((900px / 3) - 10px)` divides the width of the tile evenly
4. Set `font-size: 0;` on `.tiles` to avoid whitespace
5. Set `font-size: 20px` to `h2` in order to display the text
- 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.
#### Browser support