From fa7eb205d5f18b72c1e04a4229d171a15040bdea Mon Sep 17 00:00:00 2001
From: johannst <johannst@users.noreply.github.com>
Date: Fri, 30 Sep 2022 10:58:40 +0000
Subject: deploy: b6f25b16f1f23b0169e8f076e79ee4964b81db99

---
 web/html.html | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

(limited to 'web/html.html')

diff --git a/web/html.html b/web/html.html
index c7261cd..54bbb47 100644
--- a/web/html.html
+++ b/web/html.html
@@ -175,6 +175,64 @@
     &lt;p&gt;Some text in the second column.&lt;/p&gt;
   &lt;/div&gt;
 &lt;/div&gt;
+</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>
-- 
cgit v1.2.3