diff --git a/src/styles.css b/src/styles.css index 59fd797..4665d88 100644 --- a/src/styles.css +++ b/src/styles.css @@ -39,18 +39,69 @@ 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-columns: 150px 1fr; + gap: 10px; +} + +.three-column-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 10px; +} -.three-column-grid {} +.three-column-grid__expand-two { + display: grid; + grid-template-columns: 50px 1fr 50px; + gap: 10px; +} -.three-column-grid__expand-two {} +.five-column-grid { + display: grid; + grid-template-columns: repeat(5,1fr); + gap: 10px; +} -.five-column-grid {} +.center-grid { + display: grid; + grid-template-columns: 300px; + place-content: center; +} -.center-grid {} +.grid-in-grid-1 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + div { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(50px,1fr)); + gap: 10px; + } +} -.grid-in-grid-1 {} +.grid-in-grid-2 { + display: grid; + grid-template-columns: 70px 1fr 200px; + div { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(50px,1fr)); + gap: 10px; + } +} -.grid-in-grid-2 {} +/*
+
+
+
+
+
+
+
+
+
+
+
+
*/ .grid-madness {}