CSS Grid通过单层容器定义二维轨道，使直系子元素直接定位，删减2–3层冗余wrapper，降低DOM深度与Layout计算开销。
移动端开发中，用 CSS Grid 替代多层嵌套 div 不是为了“更炫”，而是为了解决真实存在的排版失控、调试成本高、响应式维护难这三类高频问题。
Grid 怎么减少 DOM 层级
传统方案常靠 div 套 div 实现分区对齐，比如一个卡片里分头像区、信息区、操作区，再各自加 display: flex；Grid 则让最外层容器直接定义二维轨道，所有直系子元素（.avatar、.info、.actions）通过 grid-column 或 grid-area 定位，中间那层“只为对齐而存在”的 wrapper 可以直接删掉。
- 删掉冗余 wrapper 后，DOM 深度从 4–5 层降到 2 层，浏览器 Layout 阶段遍历节点数大幅下降
- 避免在子项里再写
display: flex—— 一旦外层是grid，子项内部布局应交由自身内容逻辑决定，而非承担父级的布局职责 - 常见错误：只在外层加
display: grid，里面还塞一层div再套display: flex，结果嵌套没少，CSS 更难定位
为什么 auto-fit + minmax() 比媒体查询更可靠
移动端屏幕宽度碎片化严重，靠 @media (max-width: 768px) 切断点硬切列数，容易在 769px 和 767px 之间出现一像素错位导致第三列被挤到下一行。而 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 让浏览器实时计算：“当前宽度最多能塞几列，每列至少 280px”，不依赖预设断点。
-
auto-fit会收缩空轨道，auto-fill会保留，移动端必须选auto-fit，否则窄屏下留白严重 -
minmax(280px, 1fr)中的280px是最小可触控区域，低于此值手指易误点，不是随意写的 - 别写
repeat(12, 1fr)模仿 Bootstrap —— 移动端不需要 12 列，反而增加 Layout 计算负担
gap 为什么比 margin 更适合网格类列表
商品卡片、图标组这类网格列表，用 margin 要为每个子项写 margin-right 和 margin-bottom，还得额外处理最后一行/列的间隙清理；gap 是容器级属性，一行 gap: 12px 就能均匀控制所有行列间距，且不参与子项盒模型计算。
立即学习“前端免费学习笔记（深入）”；
-
gap在 iOS Safari 14.5+ 和 Android Chrome 72+ 均原生支持，无需前缀 - 混用
gap和margin会导致间距翻倍，尤其在动态加载卡片时极易出错 - 当卡片内容折叠或异步加载时，
gap的稳定性远高于手动margin—— 它不会因子项尺寸变化而意外撑破容器
grid-template-areas 命名区域的实际价值
命名区域不是语法糖，它是把视觉结构和 HTML 结构解耦的关键。比如后台页面的 "header header" "sidebar main" "footer footer"，HTML 里只需 4 个直系子元素，不用任何 wrapper；响应式切换时，直接换一套 grid-template-areas 字符串，比写一堆 flex-direction 和 order 更直观、更少出错。
- 字符串中每个单词长度必须一致，空格不能用 tab 混用，
.表示空单元格，连写多个.算一个位置 - 别写
".. sidebar"以为能留两列空白 —— 实际会解析失败 - 命名线（如
[sidebar-start]）比数字索引（如grid-column: 1 / 2）更安全，避免隐式网格线增长导致错位
真正容易被忽略的是：Grid 的能力边界不在“能不能做”，而在“要不要让子项自己再搞一套布局”。一旦开始在 Grid 项里写 display: grid 却没设 grid-template-rows，它的高度就会变成 auto，破坏外层节奏 —— 这种嵌套失控，比一开始多套一层 div 还难调试。
