From 1bee8cd8ae939d5f818a977400daf9db6904f868 Mon Sep 17 00:00:00 2001
From: Johannes Stoelp <johannes.stoelp@gmail.com>
Date: Thu, 29 Sep 2022 22:36:08 +0200
Subject: html: small grid area example

---
 src/web/html.md            |  5 +++++
 src/web/src/grid-area.html | 55 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 src/web/src/grid-area.html

(limited to 'src/web')

diff --git a/src/web/html.md b/src/web/html.md
index 7561cf4..e31f325 100644
--- a/src/web/html.md
+++ b/src/web/html.md
@@ -13,3 +13,8 @@
 {{#include src/grid-2col.html }}
 ```
 
+# Minimal grid area
+[Rendered html](src/grid-area.html)
+```html
+{{#include src/grid-area.html }}
+```
diff --git a/src/web/src/grid-area.html b/src/web/src/grid-area.html
new file mode 100644
index 0000000..f3f4fde
--- /dev/null
+++ b/src/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