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/grid-area.html')
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