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/src/grid-area.html | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 web/src/grid-area.html

(limited to 'web/src')

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>
+
-- 
cgit v1.2.3