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