feat: Card layout

contents/_includes/patterns/card-layout.njk

@@ -0,0 +1,5 @@
+<div class="card-layout">
+    {% for i in range(0, 9) -%}
+    <div class="card-layout__item">{% rectangle "hor", "md", 100 %}</div>
+    {%- endfor %}
+</div>

contents/card-layout.md

@@ -0,0 +1,44 @@
+---
+layout: layouts/post.njk
+title: Card layout
+description: Create a card layout with CSS flexbox
+keywords: css card layout, css flexbox, css layout
+---
+
+## HTML
+
+```html
+<div class="card-layout">
+    <!-- A card with given width -->
+    <div class="card-layout__item">
+        ...
+    </div>
+
+    <!-- Repeat other cards -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.card-layout {
+    display: flex;
+
+    /* Put a card in the next row when previous cards take all width */
+    flex-wrap: wrap;
+
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+}
+
+.card-layout__item {
+    /* There will be 3 cards per row */
+    flex-basis: 33.33333%;
+
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+}
+```
+
+{% demo %}{% include "patterns/card-layout.njk" %}{% enddemo %}

contents/index.njk

@@ -106,5 +106,12 @@ eleventyExcludeFromCollections: true
         </div>
     </div>
 
+    <div class="category">
+        <h2 class="category__name">Layout</h2>
+        <div class="category__posts">
+            {% pattern "Card layout" %}{% include "patterns/card-layout.njk" %}{% endpattern %}
+        </div>
+    </div>
+
     {% include "follow.njk" %}
 </div>