grid-template-areas 仅定义区域命名，不支持 auto 等尺寸值；尺寸必须在 grid-template-columns/rows 中用 fr、px 等设定，且 grid-area 值须严格匹配模板字符串。
grid-template-areas 里不能直接写 auto，得用命名 + grid-area 配合
很多人以为可以在 grid-template-areas 字符串里写 "header auto main" 这类语法，实际会报错或被忽略——CSS Grid 不允许在模板字符串中使用 auto、1fr 等尺寸关键字。真正做法是：先用命名区域定义结构，再用 grid-column 或 grid-row 单独控制某区域的跨度和尺寸。
比如固定侧边栏 + 自适应主内容，应这样组织：
body {
display: grid;
grid-template-areas:
"header header"
"sidebar main";
grid-template-columns: 240px 1fr; /* 固定 + 流动 */
grid-template-rows: 60px 1fr;
}其中 sidebar 区域对应列宽设为 240px（固定），main 所在列设为 1fr（流动），grid-template-areas 只负责“贴标签”，不参与尺寸计算。
固定区域用 px / rem，流动区域优先用 fr 而不是 auto
auto 在 grid-template-columns 或 grid-template-rows 中表示“内容撑开”，容易导致意外溢出或高度塌陷；而 fr 是专为响应式分配剩余空间设计的单位，更可控。
立即学习“前端免费学习笔记（深入）”；
- 固定导航栏高度？用
60px或4rem，别用auto—— 否则字体缩放或内容增减会让布局跳变 - 主内容区要占满剩余高度？写
1fr，不是auto；多个流动区按比例分配？用2fr 1fr - 如果真需要“内容自适应宽度”的列（比如卡片列表），才考虑
auto-fit+minmax()，但那是grid-template-columns的动态写法，和grid-template-areas无关
grid-area 值必须和 grid-template-areas 中的字符串完全匹配
大小写、空格、引号都敏感。下面这些都会让区域失效：
-
grid-area: Header;（首字母大写，但模板里是"header"） -
grid-area: "sidebar ";（末尾多一个空格） -
grid-area: sidebar;（没加引号，虽然部分浏览器容忍，但规范要求字符串必须加引号）
正确写法只有：grid-area: "sidebar";。检查时可直接复制模板行里的单词粘贴过去，避免手误。
嵌套 Grid 或 flex 混用时，auto 表现更不可靠
当 main 区域内部又是一个 Grid 容器，且你希望它子项高度自动填满，别指望父级设了 1fr 就万事大吉——子容器默认不继承高度。常见漏掉的一步：
.main {
grid-area: "main";
display: grid;
height: 100%; /* 必须显式设高，否则子 grid-row: 1 / -1 无效 */
grid-template-rows: 1fr;
}另外，auto 在嵌套场景下常受外层 min-content 影响，表现为高度收缩到最小内容高度。此时宁可用 minmax(0, 1fr) 强制拉伸，而不是依赖 auto。
真正难的不是写对语法，而是意识到：grid-template-areas 只是“画格子”，所有尺寸逻辑都在 columns/rows 里；一旦混用 auto 和 fr，边界情况就容易失控。
