init

css3/07-adaptive-grid-system/README.md

@@ -0,0 +1,9 @@
+# Adaptive Grid System Challenge
+
+响应式设计挑战：自适应网格系统
+题目要求：
+1. 创建一个自适应网格系统，要求：
+2. 使用CSS Grid和Flexbox
+3. 支持多种屏幕尺寸
+4. 使用媒体查询和容器查询
+5. 实现流体排版

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;
+    }
+}