grid-template-areas必须每行引号内字符数相等、区域名不重复不遗漏、空白用"."占位；grid-template-columns/rows单位需按fr/px/auto语义合理搭配；grid-template简写顺序固定为行/列/区域，缺项需用/占位；其值不支持CSS变量或表达式。
grid-template-areas 怎么写才不报错
直接用 grid-template-areas 定义布局时，最常踩的坑是：每一行字符串长度不一致、区域名拼错、或用了空格但没用点（.）占位。浏览器会静默忽略整条声明，导致布局完全失效，还查不出原因。
正确写法必须满足三个条件：
- 每行用引号包裹，且所有行引号内字符数（含空格和点）严格相等
- 每个命名区域（如
"header"）在所有行中出现且仅出现一次；重复或遗漏都会让该区域无法被grid-area选中 - 空白单元格必须用
"."（单个英文点），不能留空格、不能写""或null
示例（合法）：
display: grid; grid-template-areas: "header header header" "nav main aside" "footer footer footer";
grid-template-columns 和 grid-template-rows 的单位怎么选
列宽/行高用 fr、px、auto 或百分比，不是随意混搭——它们的行为逻辑完全不同。
立即学习“前端免费学习笔记（深入）”；
-
fr是剩余空间分配单位，只在有明确容器尺寸（如设了width或父容器有约束）时才可预测；纯fr组合下，1fr 2fr表示按比例瓜分可用空间 -
px和em是固定尺寸，适合导航栏、侧边栏等需要稳定宽度的区域；但和fr混用时，fr只作用于减去固定尺寸后的剩余空间 -
auto会让行列收缩为内容尺寸，容易引发高度塌陷或换行，慎用于grid-template-rows中未设高度的容器
常见误用：grid-template-columns: 200px 1fr auto —— 如果 auto 列内容很长，可能撑宽整行，而 1fr 实际变窄甚至为 0。
grid-template 一次性声明三者时的顺序不能乱
grid-template 是 grid-template-rows、grid-template-columns、grid-template-areas 的简写，语法顺序固定：行定义 / 列定义 / 区域定义，中间用 / 分隔。
- 漏掉某一项要用
/占位，比如只设行列不设区域：grid-template: 100px 1fr / 200px 1fr; - 如果写了区域定义但没写行列，浏览器会尝试自动推导行列数，但结果不可控；强烈建议显式写出三者或至少行列
- 一旦用了
grid-template简写，单独再设grid-template-rows等会被覆盖，调试时容易误以为“后设的生效了”
错误写法（顺序颠倒）：grid-template: "header" "main" / 1fr / 100px; —— 这会导致整个声明无效。
为什么 grid-template-areas 里不能用变量或表达式
CSS 本身不支持在 grid-template-areas 值里插入 CSS 自定义属性、calc() 或媒体查询条件。你看到的“响应式网格”其实是靠多套 @media 规则分别重写整个 grid-template-areas 声明实现的。
- 不能写：
grid-template-areas: var(--layout-sm);或grid-template-areas: calc("header" + "main"); - 移动端适配只能这样写：
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"aside"
"footer";
}
}
这意味着区域名必须提前规划好全尺寸下的命名体系，不能临时增删——否则 grid-area 对应不上，元素就“消失”在网格外。
