diff --git a/css-grid-demo/index.html b/css-grid-demo/index.html new file mode 100644 index 0000000..b1f6924 --- /dev/null +++ b/css-grid-demo/index.html @@ -0,0 +1,20 @@ + + + + + + CSS Grid and Variables Demo + + + +

CSS Grid and Variables Demo

+
+
1
+
2
+
3
+
4
+
5
+
6
+
+ + diff --git a/css-grid-demo/styles.css b/css-grid-demo/styles.css new file mode 100644 index 0000000..952f04b --- /dev/null +++ b/css-grid-demo/styles.css @@ -0,0 +1,31 @@ +:root { + --grid-gap: 20px; + --grid-columns: repeat(auto-fit, minmax(100px, 1fr)); +} + +.grid-container { + display: grid; + grid-template-columns: var(--grid-columns); + gap: var(--grid-gap); + padding: 20px; + background-color: #f9f9f9; +} + +.grid-item { + background-color: #4CAF50; + color: white; + padding: 20px; + font-size: 1.5em; + text-align: center; + border-radius: 5px; +} + +@media (max-width: 600px) { + :root { + --grid-gap: 10px; + } + + .grid-item { + font-size: 1.2em; + } +}