init

css3/07-adaptive-grid-system/app.css

@@ -0,0 +1,18 @@
+.grid-system {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+    gap: clamp(1rem, 2vw, 2rem);
+    container-type: inline-size;
+}
+
+@container (min-width: 600px) {
+    .grid-item {
+        font-size: clamp(1rem, 1.5vw, 1.5rem);
+    }
+}
+
+@media (max-width: 768px) {
+    .grid-system {
+        grid-template-columns: 1fr;
+    }
+}