css grid 替代嵌套容器可减少2–3层div，降低解析、计算与回流开销；grid-template-areas适用于页面级分区，subgrid需父容器明确定义轨道且子元素显式声明；复杂组件优先用flex或内联grid，避免冗余结构。
用 CSS Grid 替代嵌套容器，不是为了“更酷”，而是直接砍掉 2–3 层 <div>——浏览器少解析、少计算、少回流，首屏快得明显。
<h3>grid-template-areas 能解决的，就别写 class="header" class="sidebar"</h3>
<p>常见错误现象：<code><div class="app">
<div class="header"></div>
<div class="wrapper">
<div class="sidebar"></div>
<div class="main"></div>
</div>
</div>，光结构就 4 层，CSS 还要写 .app .wrapper .sidebar 这种选择器。
正确做法是单层容器 + 命名区域：
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 60px 1fr 50px;
grid-template-columns: 200px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
- HTML 只需一个
<div class="layout">，里面直系子元素按语义命名即可 <li>避免在 grid 容器里再套 <code><div class="inner"> —— DOM 没减，CSS 却更难维护 <li> <code>grid-template-areas适合页面级分区；若区域内容复杂（如侧栏内还要分上下），优先用subgrid，而非加 wrapper - 表单用
display: grid配grid-template-columns: [label] 120px [input] 1fr，<label></label>和<input>是同级元素，不用包<div class="form-row"> <li>卡片内容区不单独拆 <code><div class="card-body">：如果没独立交互或样式隔离需求，直接给 <code><article class="card"></article>设display: grid和内部分轨 - 图标+文字组合，用
<label><svg><input></svg></label>，而不是三层<div> 套 <code><div> 套 <code><input>subgrid 不是自动继承，用错等于白写
错误写法：
.card { display: grid; grid-template-columns: 1fr 2fr; } .card-content { display: subgrid; }—— 缺少关键声明，浏览器直接忽略subgrid。必须同时满足：
- 父容器已设
display: grid且明确定义了grid-template-columns（或rows） - 子元素设
display: subgrid，并显式写grid-template-columns: subgrid（不能省略） -
subgrid只对直系子元素生效，中间插一层<div> 就断了 <p>典型适用场景：仪表盘中多个卡片共享同一列宽，外层定义轨道，卡片内部用 <code>subgrid对齐，避免每张卡都重复写grid-column: 1 / -1。动态生成网格时，别让 HTML 承担数据职责
一个 13×13 的地图网格，每个格子类型为
f、s、w，如果全写进 HTML，就是 169 个标签，文件体积大、难维护、JS 修改成本高。实操建议：
- 允许 JS：把网格编码成字符串，存在
data-cells="ffsww..."，加载后用document.createElement()动态生成，DOM 节点数可控 - 纯静态：改用 SVG
<path></path>描绘区块，或用background-image+ CSS 变量控制图案，彻底规避冗余标签 - 禁用 JS 且必须 HTML：至少用
<template></template>预定义单元格结构，配合innerHTML批量插入，别手写 169 行
真正卡性能的，从来不是某一行 CSS，而是浏览器不得不为那多出来的 3 层
<div> 做 3 轮样式继承、3 次布局上下文创建、3 回选择器匹配——这些事，Grid 一句 <code>grid-area就绕过去了。 - 允许 JS：把网格编码成字符串，存在
- 父容器已设
表单和卡片这类组件级布局，别硬套 grid-template-areas
强行用 grid-template-areas 写一个三行两列的登录表单，代码反而比 flex 多出一倍，还容易错位。
更适合的方案：
