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.

snippet_data/snippetList.json

@@ -625,6 +625,21 @@
         "hash": "97b037f3f463b8cf7de0cc12a607c540ffe8a4869323a4cc17c66eebbc92d612"
       }
     },
+    {
+      "id": "tile-layout-using-inline-block",
+      "type": "snippetListing",
+      "title": "3-tile layout",
+      "attributes": {
+        "text": "Align items horizontally using `display: inline-block` to create a 3-tile layout.\n\n",
+        "tags": [
+          "layout",
+          "beginner"
+        ]
+      },
+      "meta": {
+        "hash": "ba4688945c309db9b6255f4555299034a67ea583e4e8db2806085c1c257b736f"
+      }
+    },
     {
       "id": "toggle-switch",
       "type": "snippetListing",

snippet_data/snippets.json

@@ -1153,6 +1153,33 @@
         "hash": "97b037f3f463b8cf7de0cc12a607c540ffe8a4869323a4cc17c66eebbc92d612"
       }
     },
+    {
+      "id": "tile-layout-using-inline-block",
+      "title": "3-tile layout",
+      "type": "snippet",
+      "attributes": {
+        "fileName": "tile-layout-using-inline-block.md",
+        "text": "Align items horizontally using `display: inline-block` to create a 3-tile layout.\n\n",
+        "explanation": "\n\n- Use `display: inline-block` to create a tiled layout, without using `float`, `flex` or `grid`.\n- `.tiles` is the container component, `.tile` is an item that needs to be displayed inline.\n- Use `width: calc((900px / 3))` to divide the width of the container evenly into 3 columns.\n- Set `font-size: 0;` on `.tiles` to avoid whitespace.\n- Set `font-size: 20px` to `h2` in order to display the text.\n\n",
+        "browserSupport": {
+          "text": "\n\n- https://www.caniuse.com/#search=inline-block\n",
+          "supportPercentage": 100
+        },
+        "codeBlocks": {
+          "html": "<div class=\"tiles\">\n  <div class=\"tile\">\n    <img class=\"tile_image\" src=\"https://via.placeholder.com/250x150\" alt=\"placeholder\" >\n    <h2 class=\"tile_title\">30 Seconds of CSS</h2>\n  </div>\n  <div class=\"tile\">\n    <img class=\"tile_image\" src=\"https://via.placeholder.com/250x150\" alt=\"placeholder\" >\n    <h2 class=\"tile_title\">30 Seconds of CSS</h2>\n  </div>\n  <div class=\"tile\">\n    <img class=\"tile_image\" src=\"https://via.placeholder.com/250x150\" alt=\"placeholder\" >\n    <h2 class=\"tile_title\">30 Seconds of CSS</h2>\n  </div>\n</div>",
+          "css": ".tiles {\n  width: 900px;\n  font-size: 0;\n}\n\n.tile {\n  width: calc(900px / 3);\n  display: inline-block;\n}\n\n.tile h2 {\n  font-size: 20px;\n}",
+          "js": "",
+          "scopedCss": "[data-scope=\"tile-layout-using-inline-block\"] .tiles {\n  width: 900px;\n  font-size: 0; }\n\n[data-scope=\"tile-layout-using-inline-block\"] .tile {\n  width: calc(900px / 3);\n  display: inline-block; }\n\n[data-scope=\"tile-layout-using-inline-block\"] .tile h2 {\n  font-size: 20px; }\n"
+        },
+        "tags": [
+          "layout",
+          "beginner"
+        ]
+      },
+      "meta": {
+        "hash": "ba4688945c309db9b6255f4555299034a67ea583e4e8db2806085c1c257b736f"
+      }
+    },
     {
       "id": "toggle-switch",
       "title": "Toggle switch",