From cac01c1787f6c331167a6593041487802d0e111f Mon Sep 17 00:00:00 2001 From: Hamada Abdelaal Date: Thu, 7 Mar 2024 11:57:59 +0100 Subject: [PATCH] Grid components - basic --- src/index.html | 259 +++++++++++++++++++++++++------------------------ src/styles.css | 77 +++++++++++++-- 2 files changed, 202 insertions(+), 134 deletions(-) diff --git a/src/index.html b/src/index.html index 7964e5f..7de8cce 100644 --- a/src/index.html +++ b/src/index.html @@ -1,150 +1,157 @@ + + + + + HTML Grid Components + + - - - - - HTML Grid Components - - + - - - -
-

Two Column Grid (Icon Pattern)

-
- -
-
-
-
-

Three Column Grid

-
-
-
-
-
-
-
-

Three Column Grid with Expansion

-
-
-
-
-
-
-
-

Five Column Grid

-
-
-
-
-
-
-
-
-
-

Center Grid

-
-
-
-
-
-

Grid within Grid #1

-
-
-
-
-
-
-
-
-
-
-
-
+ +
+

Two Column Grid (Icon Pattern)

+
+ +
-
-
-

Grid within Grid #2

-
-
-
-
-
-
-
-
-
-
-
+ +
+

Three Column Grid

+
+
+
+
-
-
-

Grid madness (extension)

-
-
-
-
- -
-
+ +
+

Three Column Grid with Expansion

+
+
+
+
-
-
+
+ +
+

Five Column Grid

+
+
+
+
+
+
-
-
-
-
+
+ +
+

Center Grid

+
+
-
-
- -
-
- +
+ +
+

Grid within Grid #1

+
+
+
+
+
-
- +
+
+
+
+
+
-
- +
+
+ +
+

Grid within Grid #2

+
+
+
-
- + +
+
-
- + +
+
+
+
-
- +
+
+ +
+

Grid madness (extension)

+
+
+
+
+ +
+
-
- +
+
-
- +
+
+
+
-
- +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
-
-
-
-
-
- +
+
+
+
+ +
+
+
-
-
-
- - + diff --git a/src/styles.css b/src/styles.css index 59fd797..9ebaf93 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,6 +2,7 @@ .container { padding: 8px; border: 2px dotted lightblue; + display: grid; } .logo { @@ -39,18 +40,78 @@ https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors */ -.two-column-grid__expand-two {} +.two-column-grid__expand-two { + display: grid; + grid-template: + "logo box" / + 200px 1fr; + gap: 8px; +} -.three-column-grid {} +.three-column-grid { + display: grid; + grid-template: + "box box box" / + 1fr 1fr 1fr; + gap: 8px; +} -.three-column-grid__expand-two {} +.three-column-grid__expand-two { + display: grid; + grid-template: + "box box box" / + 50px 1fr 50px; + gap: 8px; +} -.five-column-grid {} +.five-column-grid { + display: grid; + grid-template: + "box box box box box " / + 1fr 1fr 1fr 1fr 1fr; + gap: 8px; +} -.center-grid {} +.center-grid { + display: grid; + grid-template-columns: 1fr; + gap: 8px; + place-items: center; +} -.grid-in-grid-1 {} +.box.centered { + width: 300px; +} +.grid-in-grid-1 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} -.grid-in-grid-2 {} +.grid-in-grid-1 .box:first-child { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; +} -.grid-madness {} +.grid-in-grid-1 .box:last-child { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 8px; +} + +.grid-in-grid-2 { + display: grid; + grid-template-columns: 200px 1fr 300px; + grid-template-rows: 1fr; + gap: 8px; +} + +.grid-in-grid-2 .box:last-child { + display: grid; + grid-template: "inner-box inner-box inner-box" / 1fr 1fr 1fr; + gap: 8px; +} + +.grid-madness { +}