CSS DEVELOPMENT LAB · 03
响应式 Card 卡片网格
不预先规定“桌面四列、平板两列、手机一列”，而是让 Grid 根据容器宽度自动决定列数。 这一结构可以直接复用于产品、案例、新闻、博客和服务列表。
AUTO-FIT GRID
容器决定列数
每张卡片允许的最小宽度为 250px。浏览器会自动判断当前一行能够放几列， 剩余空间则由现有列共同填满。
AUTO-FIT VS AUTO-FILL
真正值得理解的是轨道行为
`auto-fit` 会折叠没有内容的空轨道，并让已有卡片继续拉伸填满空间； `auto-fill` 则会保留这些潜在轨道。两者在卡片数量较少时差异最明显。
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));