Grid 是唯一能同时约束行和列的布局模型，多宫格导航必须用它；grid-template-areas 适合固定模块数的语义化布局，repeat(auto-fit, minmax()) 实现动态列数，grid-column/grid-row 用于跨区精确定位，嵌套 Grid 处理宫格内部复杂结构。
Grid 是唯一能同时约束行和列的布局模型，多宫格导航必须用它，别用 Flexbox 模拟二维结构——容易错位、换行失控、响应式失效。
grid-template-areas 定义语义化宫格区域
适合固定模块数（如 2×2、3×4）的导航页，可读性强、维护成本低。命名区域直接对应业务模块，比如“dashboard users logs settings”，避免用 col-1-1 这类无意义命名。
常见错误现象：grid-template-areas 每行引号内列数不一致，导致整个声明被浏览器忽略；或某区域名拼错，对应 grid-area 元素无法归位。
- 每行字符串中空格分隔列，点号
.表示空白单元格 - 所有子元素必须设置
grid-area，且值严格匹配grid-template-areas中的名称 - 外层容器设
display: grid，并用gap控制模块间距，别用margin
.nav-grid {
display: grid;
gap: 16px;
grid-template-areas:
"dashboard users"
"logs settings";
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.dashboard { grid-area: dashboard; }
.users { grid-area: users; }
.logs { grid-area: logs; }
.settings { grid-area: settings; }
repeat(auto-fit, minmax())) 实现动态宫格数量
适用于卡片式导航（如后台功能入口），列数随容器宽度自动增减，无需写死断点。核心是让每个宫格有最小宽度、最大弹性伸缩空间。
性能影响：auto-fit 会触发隐式网格生成，若宫格内含大量 DOM 或未加 contain: layout style paint，滚动时可能卡顿。
- 用
minmax(240px, 1fr)确保单宫格不窄于 240px，又能在空间充足时均分剩余宽度 -
auto-fit会折叠空轨道，auto-fill则保留空位，选auto-fit更实用 - 配合
justify-content: start防止小屏下宫格被强行拉宽变形
.nav-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
justify-content: start;
}
grid-column / grid-row 精确控制跨区宫格
当某个导航模块需要突出显示（如主入口占两列）、或模块高度差异大（如带图标+文字的长卡片），必须脱离命名区域，改用线号定位。
容易踩的坑：grid-row: 1 / 3 表示从第 1 行线到第 3 行线（即跨 2 行），不是“从第 1 行到第 3 行”；起始线号从 1 开始计数，不是 0。
- 用
grid-column: span 2让元素横跨 2 列，比写grid-column: 1 / 3更安全 - 避免混用命名区域与线号定位——同一容器内二者不可共存，否则行为未定义
- 若需错位排布（如斜向视觉动效），用
grid-row+grid-column组合，而非 transform 位移
嵌套 Grid 处理宫格内部复杂结构
每个宫格本身可能是“标题+图标+描述+操作按钮”的组合，这时在宫格元素上再启一个 display: grid，比塞一堆 flex 更可控。
注意兼容性：旧版 Safari（subgrid 支持不全，但普通嵌套 Grid 无问题；若需 subgrid，得降级为 Flexbox 内部布局。
- 宫格容器设
display: grid，用grid-template-rows: auto 1fr auto分配图标、文字、按钮区域 - 内部子项用
grid-area或线号精确定位，避免用margin推挤 - 给宫格容器加
contain: layout style paint，隔离重绘范围，防止其他模块滚动抖动
真正难的不是写出能跑的 Grid，而是当宫格里开始加载异步数据、插入第三方组件、绑定全局事件监听器时，边界是否清晰——没加容器封装、没设 contain、没解耦通信，再多的 grid-template-columns 也救不了页面卡顿和样式污染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
