Grid布局需先定义行列结构才能生效，否则grid-column等定位无效；fr单位与minmax()组合实现真正响应式，gap替代margin统一控制间距，现代浏览器已全面支持。
Grid 布局不是“选学技巧”，而是现代页面布局的默认起点——只要父容器设了 display: grid，子元素立刻变成可定位的网格项，不需要 flex 嵌套、不需要浮动、也不需要 JavaScript 计算位置。
必须先定义行列结构，否则 grid-column 无效
很多人写了 grid-column: 1 / 3 却没效果，根本原因是：没声明 grid-template-columns 或 grid-template-rows，网格线压根不存在。
- 浏览器不会自动创建列数；
display: grid只是开启网格上下文，不生成任何可见网格线 - 哪怕只想要“按内容自动分列”，也得写
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))这类显式模板 -
grid-auto-columns和grid-auto-rows是兜底机制，仅对“超出模板定义范围”的隐式网格生效，不能替代显式定义
fr 单位和 minmax() 组合才是响应式核心
用 px 或 % 写死列宽，在不同屏幕下极易溢出或留白；fr + minmax() 才真正解决“既要最小可用宽度，又要弹性撑满”的矛盾。
-
1fr不是“1份像素”，而是“剩余可用空间的等分单位”，依赖于容器宽度和其他轨道尺寸 -
minmax(250px, 1fr)表示：这一列至少 250px，最多占满剩余空间；比单纯写1fr更安全 -
repeat(auto-fit, ...)和repeat(auto-fill, ...)行为不同：auto-fit会折叠空轨道，auto-fill则保留空槽——实际响应式中几乎总是用auto-fit
grid-area 命名区域适合复杂结构，但别过早使用
grid-template-areas 看起来直观，但一旦 HTML 结构微调（比如加个广告位、换顺序），就得同步改 CSS 字符串，维护成本陡增。
立即学习“前端免费学习笔记（深入）”；
- 命名区域本质是语法糖，底层仍靠网格线定位；
grid-area: header等价于grid-row: 1; grid-column: 1 / -1 - 小项目（如三栏布局）直接用
grid-column: 1 / 2更轻量、更易调试 - 只有当区域多、逻辑强（如仪表盘含 header/sidebar/main/footer + 多张卡片）时，才值得用
grid-template-areas提升可读性
gap 替代 margin 实现间距，且兼容性已无死角
别再给每个网格项写 margin-right/bottom 来模拟间隙——这会导致最后一行/列多出空白，还容易触发 margin collapse 或响应式错位。
-
gap（或旧名grid-gap）是容器级属性，只作用于项目之间的空隙，不影响外边距逻辑 - 所有现代浏览器（Chrome 66+、Firefox 61+、Safari 10.1+、Edge 16+）均已原生支持
gap，无需前缀 - 如果必须兼容 IE，就别用 Grid；IE 完全不支持
display: grid，任何 polyfill 都是伪解
真正卡住人的从来不是语法记不住，而是没意识到：Grid 的行为高度依赖“容器是否明确定义了轨道”，以及“你是否在用 gap 而不是 margin 控制间隔”。这两点漏掉任何一个，都会让布局看起来“随机失效”。
