From 034b3eed6252c0193bf1102a630180969a0c1934 Mon Sep 17 00:00:00 2001
From: chingchinglcc <30460357+chingchinglcc@users.noreply.github.com>
Date: Tue, 1 Oct 2019 15:49:25 -0600
Subject: [PATCH 1/3] Add snippet

Align items horizontally without float, flexbox, and grid. 100% browser support and support old browsers
---
 ...move-inline-block-container-white-space.md | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 snippets/remove-inline-block-container-white-space.md

diff --git a/snippets/remove-inline-block-container-white-space.md b/snippets/remove-inline-block-container-white-space.md
new file mode 100644
index 000000000..c1146c016
--- /dev/null
+++ b/snippets/remove-inline-block-container-white-space.md
@@ -0,0 +1,53 @@
+---
+title: Remove inline-block container whitespace
+tags: layout, beginner
+---
+
+Creates a bouncing loader animation.
+
+```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>
+  </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>
+  </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>
+  </div>
+</div>
+```
+
+```css
+.tiles {
+    width: 900px;
+    font-size: 0;
+}
+
+.tile {
+    width: calc(900px / 3);
+    display: inline-block;
+}
+
+.tile h2 {
+  font-size: 20px;
+}
+```
+
+#### Explanation
+
+Note: `1rem` is usually `16px`.
+
+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
+
+#### Browser support
+
+- https://www.caniuse.com/#search=inline-block

From 184592b01dea6c06e259c9e3ae47038df8b505a3 Mon Sep 17 00:00:00 2001
From: chingchinglcc <30460357+chingchinglcc@users.noreply.github.com>
Date: Tue, 1 Oct 2019 15:58:52 -0600
Subject: [PATCH 2/3] Update remove-inline-block-container-white-space.md

---
 snippets/remove-inline-block-container-white-space.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/snippets/remove-inline-block-container-white-space.md b/snippets/remove-inline-block-container-white-space.md
index c1146c016..32e2cc1ad 100644
--- a/snippets/remove-inline-block-container-white-space.md
+++ b/snippets/remove-inline-block-container-white-space.md
@@ -40,8 +40,6 @@ Creates a bouncing loader animation.
 
 #### Explanation
 
-Note: `1rem` is usually `16px`.
-
 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

From ac36405496378cddad0bc30164b8469a377b366c Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 2 Oct 2019 09:51:59 +0300
Subject: [PATCH 3/3] Update and rename
 remove-inline-block-container-white-space.md to
 tile-layout-using-inline-block.md

---
 ...e.md => tile-layout-using-inline-block.md} | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)
 rename snippets/{remove-inline-block-container-white-space.md => tile-layout-using-inline-block.md} (54%)

diff --git a/snippets/remove-inline-block-container-white-space.md b/snippets/tile-layout-using-inline-block.md
similarity index 54%
rename from snippets/remove-inline-block-container-white-space.md
rename to snippets/tile-layout-using-inline-block.md
index 32e2cc1ad..d74558d8b 100644
--- a/snippets/remove-inline-block-container-white-space.md
+++ b/snippets/tile-layout-using-inline-block.md
@@ -1,9 +1,9 @@
 ---
-title: Remove inline-block container whitespace
-tags: layout, beginner
+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">
@@ -24,13 +24,13 @@ Creates a bouncing loader animation.
 
 ```css
 .tiles {
-    width: 900px;
-    font-size: 0;
+  width: 900px;
+  font-size: 0;
 }
 
 .tile {
-    width: calc(900px / 3);
-    display: inline-block;
+  width: calc(900px / 3);
+  display: inline-block;
 }
 
 .tile h2 {
@@ -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