Grid区域命名须与grid-template-areas完全一致，大小写、空格、拼写均不可错；区域名仅支持字母数字和连字符，不可引号包裹；.表示空白单元格且需对齐列数；aspect-ratio协同grid-auto-rows实现Metro磁贴效果。
Grid区域命名必须和grid-template-areas完全一致
写错一个字母、多一个空格、大小写不匹配，整个布局就失效，浏览器不会报错，但grid-area会静默退化为auto——元素堆在左上角，像没写样式一样。
常见错误现象：grid-area: header; 对应的 grid-template-areas 里写成了 "headr main aside"（拼错）或 "'header' 'main' 'aside'"（多了引号包裹单个词）。
- 区域名只能是合法标识符：支持字母、数字、连字符，不能以数字开头，不能含空格或点
- 每一行字符串必须用空格分隔多个区域名，用换行分隔多行；单引号/双引号仅用于包裹整行，不可用于单个区域名内部
- 空白单元格用
.（英文句点）表示，且必须和其他区域名一样对齐列数，否则网格轨道错位
grid-template-areas: "header header header" "nav main aside" "footer footer footer";
grid-area赋值时不能带引号
很多人从 CSS 字符串属性（如content: "x"）习惯迁移到这里，给grid-area加引号，结果无效。它只接受无引号的标识符，不是字符串值。
使用场景：给每个区块容器指定归属区域，比如导航栏、主内容、侧边栏、页脚。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
grid-area: nav; - ❌ 错误：
grid-area: "nav";或grid-area: 'nav'; - ❌ 错误：
grid-area: nav-main;（除非你在grid-template-areas里也定义了叫nav-main的区域）
Metro磁贴效果依赖grid-auto-rows与aspect-ratio协同
纯靠grid-template-areas只能定义结构，真正让“磁贴”有 Metro 风格的不规则拼接感，得靠动态行高 + 固定宽高比控制拉伸行为。
性能影响：用aspect-ratio比 JS 计算尺寸更轻量，但旧版 Safari（≤15.6）不支持，需配合padding-top hack 或降级为固定height。
-
grid-auto-rows: minmax(120px, 1fr);确保每行至少 120px 高，又能随容器等分剩余空间 - 每个磁贴加
aspect-ratio: 1 / 1;或aspect-ratio: 2 / 1;，再配width: 100%; height: 100%;，才能稳住比例 - 避免对磁贴设
flex或position: absolute，会破坏 Grid 的区域定位逻辑
响应式断点里重定义grid-template-areas要整体替换
不能只改某一行，也不能叠加写多个grid-template-areas——后写的会覆盖前写的，而且媒体查询内必须完整写出全部行结构，哪怕只动了一处。
容易踩的坑：在@media (max-width: 768px)里只写了两行，漏掉footer，结果页脚消失；或者用grid-template-areas: inherit，但该属性不继承。
- 移动端建议压缩为单列：
"header" "nav" "main" "aside" "footer" - 所有断点中的
grid-template-areas值都必须是完整字符串，行列数与主模板保持语义一致 - 如果某区域在小屏下隐藏，仍需保留对应位置的
.，否则区域映射错乱
aspect-ratio和minmax()如何不打架——这时候overflow: hidden和object-fit往往比调 Grid 更管用。 
