还在用 float 或者一堆 media query 算百分比？Grid 两行就能解决。
自适应卡片网格
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
minmax(240px, 1fr) 的意思是：每列最小 240px，最大占满剩余空间。auto-fill 会自动算一行能塞几列，容器变窄就自动换行——不需要写任何媒体查询。
auto-fill 和 auto-fit 的区别：
| 值 | 元素不够时 | 典型场景 |
|---|---|---|
auto-fill |
保留空轨道，卡片不拉伸 | 卡片数量动态变化 |
auto-fit |
折叠空轨道，卡片拉伸填满 | 希望始终铺满 |
经典后台布局（顶栏 + 侧栏 + 内容）
.layout {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 56px 1fr;
grid-template-areas:
"header header"
"sidebar main";
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
手机上只要改一行：
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "sidebar";
}
}
顺序都能换，这是 float 时代想都不敢想的。
两个调试技巧
grid-template-columns: repeat(12, 1fr)+grid-column: span 4做 12 栅格最直观- Chrome DevTools 里 Elements 面板点
grid徽标，能直接看到轨道线和区域名
兼容性：主流浏览器 2017 年后都支持，本站这类项目可以放心用。
楼主 · 2026-09-28 13:21 · 浏览 4
