Travis build: 504

README.md

@@ -64,6 +64,7 @@ See CONTRIBUTING.md for the snippet template.
 * [`Last item with remaining available height`](#last-item-with-remaining-available-height)
 * [`Lobotomized Owl Selector`](#lobotomized-owl-selector)
 * [`Offscreen`](#offscreen)
+* [`3-tile layout`](#3-tile-layout)
 * [`Transform centering`](#transform-centering)
 * [`Truncate text multiline`](#truncate-text-multiline)
 * [`Truncate text`](#truncate-text)
@@ -1164,6 +1165,62 @@ A bulletproof way to completely hide an element visually and positionally in the
 
 <br>[⬆ Back to top](#contents)
 
+### 3-tile layout
+
+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>
+  </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
+
+
+- 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
+
+100.0%
+
+- https://www.caniuse.com/#search=inline-block
+
+<br>[⬆ Back to top](#contents)
+
 ### Transform centering
 
 Vertically and horizontally centers a child element within its parent element using `position: absolute` and `transform: translate()` (as an alternative to `flexbox` or `display: table`). Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.