feat: Holy grail

contents/_includes/patterns/holy-grail.njk

@@ -0,0 +1,9 @@
+<div class="holy-grail">
+    <div class="holy-grail__header">{% rectangle %}</div>
+    <div class="holy-grail__main">
+        <div class="holy-grail__left">{% lines "hor", 4 %}</div>
+        <div class="holy-grail__middle">{% lines "hor", 10 %}</div>
+        <div class="holy-grail__right">{% lines "hor", 8 %}</div>
+    </div>
+    <div class="holy-grail__footer">{% rectangle %}</div>
+</div>

contents/holy-grail.md

@@ -0,0 +1,62 @@
+---
+layout: layouts/post.njk
+title: Holy grail
+description: Create a holy grail layout with CSS flexbox
+keywords: css flexbox, css holy grail layout, css layout
+---
+
+## HTML
+
+```html
+<div class="holy-grail">
+    <header>
+        ...
+    </header>
+    <main class="holy-grail__main">
+        <!-- Left sidebar -->
+        <aside class="holy-grail__left">...</aside>
+
+        <!-- Main content -->
+        <article class="holy-grail__middle">...</article>
+
+        <!-- Right sidebar -->
+        <nav class="holy-grail__right">...</nav>
+    </main>
+    <footer>
+        ...
+    </footer>
+</div>
+```
+
+## CSS
+
+```css
+.holy-grail {
+    display: flex;
+    flex-direction: column;
+}
+
+.holy-grail__main {
+    /* Take the remaining height */
+    flex-grow: 1;
+
+    /* Layout the left sidebar, main content and right sidebar */
+    display: flex;
+    flex-direction: row;
+}
+
+.holy-grail__left {
+    width: 25%;
+}
+
+.holy-grail__middle {
+    /* Take the remaining width */
+    flex-grow: 1;
+}
+
+.holy-grail__right {
+    width: 20%;
+}
+```
+
+{% demo %}{% include "patterns/holy-grail.njk" %}{% enddemo %}

contents/index.njk

@@ -110,6 +110,7 @@ eleventyExcludeFromCollections: true
         <h2 class="category__name">Layout</h2>
         <div class="category__posts">
             {% pattern "Card layout" %}{% include "patterns/card-layout.njk" %}{% endpattern %}
+            {% pattern "Holy grail" %}{% include "patterns/holy-grail.njk" %}{% endpattern %}
         </div>
     </div>