grid-template-columns和grid-template-rows必须显式定义，否则display: grid不会自动布局；fr单位仅在grid容器内按剩余空间分配；gap已替代grid-gap，旧版safari需双写兼容；网格线从1开始编号；子元素margin不塌陷，推荐用gap代替。
grid-template-columns和grid-template-rows必须显式定义
不写这两项，display: grid 什么也不会渲染出来——它不会自动按子元素数量均分，也不会继承父容器宽高。常见错误是只写了 display: grid 就以为能出格子，结果页面空白或元素堆叠在左上角。
实际做法取决于布局目标：
- 等宽三列：用
grid-template-columns: 1fr 1fr 1fr或简写为grid-template-columns: repeat(3, 1fr) - 固定+自适应混合：比如侧边栏 240px + 主内容占满剩余，写成
grid-template-columns: 240px 1fr - 行高按内容撑开：用
grid-template-rows: auto auto；需要均分高度时才用1fr
注意：fr 单位只在 Grid 容器内有效，且只参与剩余空间分配，不是百分比。
grid-gap已被gap替代，但旧写法仍可能触发兼容问题
grid-gap、grid-column-gap、grid-row-gap 是旧规范，在 Chromium 107+ 和 Firefox 109+ 中已被弃用。现在统一用 gap、column-gap、row-gap。
问题常出现在复制老教程代码后间距不生效，或 DevTools 显示 “invalid property value”：
- ✅ 正确：
gap: 12px（同时作用于行列） - ✅ 正确：
column-gap: 8px; row-gap: 16px - ❌ 风险：
grid-gap: 12px在部分旧版 Safari（≤15.4）中失效
如果你的项目需支持 iOS 15.4 及更早系统，建议双写：grid-gap: 12px; gap: 12px，前者兜底，后者为主。
grid-area和line-based定位容易混淆起始线编号
Grid 线编号从容器边缘开始，**从 1 开始计数**，不是 0。写 grid-column: 1 / 3 表示“从第 1 条竖线到第 3 条竖线”，即跨越前两个列轨道（col-1 和 col-2），不是“从第 1 列到第 3 列”。
典型误用场景：
- 想让标题跨全部三列，却写了
grid-column: 1 / 4—— 这是对的；但有人错写成1 / 3，结果只跨两列 - 用
grid-area时顺序是grid-area: row-start / column-start / row-end / column-end，漏掉任一值会解析失败，变成auto - 命名区域（
grid-template-areas）更直观，适合语义化布局，比如："header header" "nav main" "footer footer"
调试建议：在浏览器 DevTools 中勾选 “Show line numbers”（Chrome/Firefox 均支持），能直接看到每条网格线的编号。
盒模型叠加时padding/margin会影响grid-track尺寸计算
Grid 容器自身的 padding 会撑大容器，但默认不影响轨道大小；而子元素的 margin 不会塌陷，会真实占据网格区域外的空间，可能导致溢出或滚动条意外出现。
关键点：
- 子元素设置
margin后，其实际占用宽度 =grid-column-end - grid-column-start对应的轨道宽度 + 左右 margin - 若希望 margin 被包含在轨道内，给子元素加
box-sizing: border-box没用——得改容器：用grid-template-columns: calc(1fr - 12px) calc(1fr - 12px)手动预留，或改用gap - 最稳妥方式：子元素禁用
margin，统一用gap控制间隔；需要外边距时，仅对容器整体设padding
复杂布局里，gap 和 padding 的分工一定要清晰——gap 管网格项之间，padding 管容器与内容之间，混用容易算错尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
