grid-template-areas是定义非对称网格最直观的方式，通过语义化字符串（如"header header header" "sidebar main main"）明确区域布局，配合fr与固定值混合的grid-template-columns实现可控动线与呼吸感留白。
grid-template-areas + fr 混合单位就能落地，不用 JS、不依赖框架。
怎么用 grid-template-areas 定义非对称结构
命名区域是控制非对称最直观的方式，它把抽象的行列坐标转成语义化标签，改布局时只需调整字符串，不碰数字索引。
-
grid-template-areas中每行字符串代表一行，每个单词代表一个列轨道上的区域名；空格分隔不同列，换行分隔不同行 - 同一区域名在多列/多行中连续出现，就自动拉伸成矩形区域（比如
"header header header"是横跨三列的顶部栏） - 用
.表示空白单元格，它不占内容，但保留网格结构节奏（比如侧边栏下方留空，用"sidebar . main"） - 区域名必须全小写、无空格、不能是
auto或span这类保留字
示例：一个左窄右宽、底部通栏的典型非对称结构
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main "
"footer footer footer";
grid-template-columns: 250px 1fr 0.8fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
fr 混合固定值与内容自适应单位的关键细节
非对称的核心是比例感，fr 单位本身不等于像素，它按权重瓜分剩余空间——但前提是得留出“剩余”。
- 如果所有列都用
fr（如1fr 2fr 1fr），那确实是严格比例，但容易在小屏上挤崩；加一个固定宽度列（如250px），其余fr列才真正“响应”剩余空间 -
minmax(250px, 1fr)不适合非对称主结构，它更适合卡片列表这类重复项；主框架列建议用显式混合：250px 1.5fr 1fr，数值比一目了然 -
auto行高要慎用：若header内容高度突增（比如标题换行），可能撑开整行，影响下方sidebar和main的对齐；更稳的是min-content或带max-height的组合 - 浏览器计算
fr时会先扣除gap和固定尺寸轨道，再分配剩余——所以gap: 20px实际会让三列总宽减少 40px（两处列间隙）
响应式切换时避免区域名冲突
媒体查询里重定义 grid-template-areas 很方便，但容易踩两个坑：一是区域名没覆盖全，二是隐式网格项错位。
立即学习“前端免费学习笔记（深入）”；
- 必须保证每个断点下的
grid-template-areas字符串行数一致，否则grid-auto-rows可能插入意外空行 - 移动端堆叠时，别写
"header" "sidebar" "main" "footer"——这会让四行高度都按auto算，导致main被压扁；改用"header" "main" "sidebar" "footer"把主要内容前置 - 如果某区域在某个断点下不显示（比如侧边栏收起），不要删掉对应区域名，而应让它占据
.单元格，否则其他区域的相对位置会偏移 -
display: contents在网格项上慎用：它会让子元素升格为网格项，破坏grid-area绑定，非对称结构瞬间失序
为什么不用 grid-column/grid-row 直接定位
手动写 grid-column: 2 / 4 看似灵活，但在非对称排版中反而增加维护成本。
- 当某列宽度变化（比如从
250px改成280px），所有依赖该列线编号的grid-column-start都得重算，易漏改 - 多人协作时，没人记得清第 5 条列线对应哪块内容；而
grid-area: cta-banner一眼可知用途 - 调试时浏览器 DevTools 的网格叠加层只高亮命名区域，不标数字线号——你无法快速验证
grid-column: 3 / -1是否真跨到最后 - 只有在需要微调单个项目（比如让按钮跨两行但不改变整体区域划分）时，才局部用
grid-row: span 2，而非全局靠它搭骨架
fr 比例、每多一行 grid-template-areas 字符串，都意味着更多隐性约束。留白不是省略，而是主动选择不填满——这点和 Grid 的“声明即约束”哲学完全一致。 
