Grid 布局适合二维布局场景，如仪表盘、相册网格、表单对齐和响应式卡片墙；grid-template-columns/rows 应优先用 fr、minmax() 与 auto-fit 配合 repeat()；线编号从 1 开始，-1 表示末尾线；调试务必开启 DevTools 的 Grid 面板并勾选显示线编号与区域高亮。
Grid 布局适合什么场景
Grid 不是用来替代 flexbox 的，它专为二维布局设计——需要同时控制行和列的场景才该用。比如仪表盘、相册网格、表单对齐、响应式卡片墙。如果只是水平排列几个按钮或垂直堆叠导航项，flexbox 更轻量、语义更清晰。
grid-template-columns 和 grid-template-rows 怎么设才不踩坑
这两个属性决定网格容器的轨道结构，但初学者常误以为写死像素值最稳妥。其实多数真实项目应优先用 fr、minmax() 和 auto-fit 配合 repeat()。
-
fr是“剩余空间分配单位”，不是固定像素；1fr 2fr表示按 1:2 分配剩余空间，不是 1px 和 2px -
minmax(200px, 1fr)能防止列被压缩到过窄，比单纯写1fr更健壮 -
repeat(auto-fit, minmax(300px, 1fr)))是响应式网格核心写法，浏览器会自动计算能放几列，无需媒体查询
/* 推荐：自适应三栏（最小 300px，最多填满） */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))));
}
grid-column 和 grid-row 的起止线编号容易搞错
Grid 线编号从 1 开始，且默认每条轨道两侧都有一条线。一个 3 列网格有 4 条纵向线（1–4），不是 3 条。用负数可从末尾反向计数：-1 指最右边那条线。
-
grid-column: 2 / 4表示从第 2 条线开始，到第 4 条线结束（跨两列） -
grid-column: 1 / -1是常用技巧，让元素横跨全部列，比写1 / 5更安全（列数变化时不用改） - 避免用
span 2直接写在属性里，除非你确定起点明确；grid-column: span 2会从当前源顺序位置开始跨，容易在重排后行为异常
调试 Grid 布局时最该开的 DevTools 设置
Chrome 和 Firefox 的 Grid 面板不是装饰——它能实时显示线编号、轨道尺寸、区域命名，关掉等于蒙眼调样式。
立即学习“前端免费学习笔记（深入）”；
- 右键元素 → “检查” → 右上角三个点 → 勾选
Show line numbers（显示线编号） - 勾选
Highlight areas，带grid-area名称的区域会高亮，方便核对命名是否拼错 - 不要依赖“元素面板里看 computed width/height”来判断 Grid 行高列宽，那些值常是
auto或0px，实际尺寸得看 Grid 面板里的轨道信息
Grid 的复杂度不在语法，而在理解“容器定义轨道、子项定位到轨道”的分离逻辑。很多人卡在子项突然不按预期排列，其实八成是容器没定义好列数，或者用了 grid-column-start 却忘了配 grid-column-end。
