动手：响应式卡片布局

你要做什么

一个自动适配手机和电脑的卡片网格——4 列在桌面，2 列在平板，1 列在手机。

⏱️ 15 分钟 | 🛠️ HTML + CSS Grid

跟着做

帮我做一个响应式卡片网格：
1. 8 张卡片，每张有图标、标题、描述文字
2. 桌面端 4 列，平板 2 列，手机 1 列
3. 卡片悬停时放大 1.05 倍，加阴影
4. 卡片之间有均匀间距
5. 使用 CSS Grid 实现

深入理解 Grid

帮我在卡片网格里混入一张"特色卡片"，占 2 列宽度
解释一下 CSS Grid 的 fr 单位和 auto-fill 的区别

🎯 进阶挑战

• 卡片加上不同颜色的顶部边框（像 Notion 的标签色）
• 做一个筛选按钮：点击只显示某一类卡片
• 卡片内容从 JSON 数据动态渲染

✅ 你做到了

• 掌握了 CSS Grid 响应式布局
• 理解了 auto-fill / minmax 的用法
• 能做出适配所有屏幕的卡片布局