2 files changed, 113 insertions, 0 deletions

diff --git a/web/html.html b/web/html.html
index c7261cd..54bbb47 100644
--- a/web/html.html
+++ b/web/html.html
@@ -176,6 +176,64 @@
   </div>
 </div>
 </code></pre>
+<h1 id="minimal-grid-area"><a class="header" href="#minimal-grid-area">Minimal grid area</a></h1>
+<p><a href="src/grid-area.html">Rendered html</a></p>
+<pre><code class="language-html">&lt;style&gt;
+.page-grid {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas:
+      &quot;h h&quot;
+      &quot;s m&quot;
+      &quot;f f&quot;;
+  gap: 1em;
+}
+.gh {
+  grid-area: h;
+  background-color: orange;
+}
+.gs {
+  grid-area: s;
+  background-color: green;
+}
+.gm {
+  grid-area: m;
+  background-color: gray;
+}
+.gf {
+  grid-area: f;
+  background-color: yellow;
+}
+.nav-items {
+  display: flex;                  /* flexbox model =&gt; flexible layout on row */
+  justify-content: space-around;  /* align flex boxes horizontally with space around */
+  align-items: center;            /* center flex items vertically */
+  list-style: none;
+}
+p {
+  margin: 1em;
+}
+&lt;/style&gt;
+&lt;div class=&quot;page-grid&quot;&gt;
+  &lt;div class=&quot;gh&quot;&gt;
+      &lt;ul class=&quot;nav-items&quot;&gt;
+          &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;&quot;&gt;aa&lt;/a&gt;&lt;/li&gt;
+          &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;&quot;&gt;bb&lt;/a&gt;&lt;/li&gt;
+          &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;&quot;&gt;cc&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gs&quot;&gt;
+    &lt;p&gt;Some text in the second column.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gm&quot;&gt;
+    &lt;p&gt;Some text in the second column.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gf&quot;&gt;
+    &lt;p&gt;Some text in the second column.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+</code></pre>
 
                     </main>
 
diff --git a/web/src/grid-area.html b/web/src/grid-area.html
new file mode 100644
index 0000000..f3f4fde
--- /dev/null
+++ b/web/src/grid-area.html
@@ -0,0 +1,55 @@
+<style>
+.page-grid {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas:
+      "h h"
+      "s m"
+      "f f";
+  gap: 1em;
+}
+.gh {
+  grid-area: h;
+  background-color: orange;
+}
+.gs {
+  grid-area: s;
+  background-color: green;
+}
+.gm {
+  grid-area: m;
+  background-color: gray;
+}
+.gf {
+  grid-area: f;
+  background-color: yellow;
+}
+.nav-items {
+  display: flex;                  /* flexbox model => flexible layout on row */
+  justify-content: space-around;  /* align flex boxes horizontally with space around */
+  align-items: center;            /* center flex items vertically */
+  list-style: none;
+}
+p {
+  margin: 1em;
+}
+</style>
+<div class="page-grid">
+  <div class="gh">
+      <ul class="nav-items">
+          <li class="nav-item"><a href="">aa</a></li>
+          <li class="nav-item"><a href="">bb</a></li>
+          <li class="nav-item"><a href="">cc</a></li>
+      </ul>
+  </div>
+  <div class="gs">
+    <p>Some text in the second column.</p>
+  </div>
+  <div class="gm">
+    <p>Some text in the second column.</p>
+  </div>
+  <div class="gf">
+    <p>Some text in the second column.</p>
+  </div>
+</div>
+