命名区域需与grid-template-areas严格对齐，必须用带引号字符串匹配；fr是剩余空间等分单位，只用于grid-template-columns/rows，不适用于width/height。
命名区域（grid-area）怎么用才不踩坑
命名区域本质是给 grid-template-areas 中的字符串占位符起别名，不是随便写个名字就能生效——必须和 grid-template-areas 定义的布局图严格对齐，空格分隔列、换行分隔行，且每个单元格只能属于一个命名区域。
常见错误是拼写不一致或漏掉引号，比如写成 grid-area: header; 但 grid-template-areas 里写的是 "hd nav" "main main"，其中 hd 和 header 不匹配，浏览器直接忽略该区域分配。
-
grid-area值必须是字符串字面量（带引号），不能是变量或 CSS 自定义属性 - 跨多行/列的区域，名称在
grid-template-areas中需重复出现，如"header header" "main sidebar"表示header占两列 - 未被命名的网格单元格（比如用
.占位）无法通过grid-area选中，也不能设置样式
fr 单位到底怎么算宽高，和 %、px 有什么区别
fr 是“fraction”缩写，代表**剩余可用空间的等分份额**，不是百分比，也不受父容器原始尺寸直接约束。它只在 Grid 容器的 grid-template-columns 或 grid-template-rows 中生效，且只参与“剩余空间”的分配。
例如 grid-template-columns: 200px 1fr 2fr;：第一列固定 200px，剩下空间按 1:2 分给后两列；若写成 1fr 1fr 1fr，三列均分容器宽度；但若混用 minmax(200px, 1fr)，则每列至少 200px，超出部分再按 fr 比例分。
立即学习“前端免费学习笔记（深入）”；
- fr 不适用于
width/height属性，写了无效 - fr 与
auto并存时，auto先根据内容撑开，剩余空间再由 fr 分配 - 多个 fr 相加不等于 100%，比如
1fr 1fr 1fr是三等分，2fr 1fr是 2:1，不是 66% 和 33%
如何用命名区域 + fr 协同控制响应式断点
命名区域本身不响应，真正驱动响应的是媒体查询中重写 grid-template-areas 和 grid-template-columns/grid-template-rows。fr 单位天然适配容器缩放，所以只需改布局结构，不用动每个子项的 grid-area。
比如桌面端三栏：grid-template-areas: "header header header" "nav main sidebar" "footer footer footer";，配合 grid-template-columns: 250px 1fr 300px;；到移动端可改为：@media (max-width: 768px) { grid-template-areas: "header" "nav" "main" "sidebar" "footer"; grid-template-columns: 1fr; }，所有区域自动堆叠，grid-area 值完全不用改。
- 避免在媒体查询里重复定义
grid-area，否则易覆盖原值或引发冲突 - 用
minmax()包裹 fr（如minmax(200px, 1fr)）能防止区域过窄，比纯 fr 更健壮 - 命名区域名建议用语义化小写英文（如
main、aside），别用col1、box-a这类无意义名，否则断点切换时难维护
为什么 grid-template-areas 里用点（.）占位容易出问题
. 表示空单元格，但它不是“透明”或“忽略”，而是**真实占据一个网格轨道位置**。如果列数不一致，比如某行写 "a . c"，另一行写 "d e"，浏览器会报错或自动补全，导致实际列数变多、布局错位。
更隐蔽的问题是：当用 grid-column-gap 或 grid-row-gap 时，. 所在位置仍会参与 gap 计算，造成视觉上莫名的空白间隙。
- 确保每行字符串用空格分隔的 token 数量一致，否则
grid-template-areas整体声明失效 - 空区域优先考虑用
grid-column: span 1配合显式定位，而非依赖. - 调试时可在开发者工具里展开 Grid 面板，看浏览器是否把
.渲染为带边框的空白格子——那是它正在占用空间的信号
grid-column-start、grid-row-end 等八条定位属性，也不必反复计算百分比。但前提是，grid-template-areas 的字符串布局图必须一次画准，改起来牵一发而动全身。 
