grid-template-areas 字符串必须与 grid-template-columns 定义的列数严格匹配，每行区域名数量须相等且用 . 占位空格，区域名需合法；auto-fill 保留空轨道而 auto-fit 收缩，minmax(280px,1fr) 是卡片宽度实测底线；响应式需同步更新 areas/columns/rows；应按语义（如 banner、nav）而非视觉位置命名区域。
grid-template-areas 字符串必须和列数严格对齐
写完 grid-template-areas: "header header" "nav main" 却发现所有区域横着排成一行？不是 CSS 失效，是整条规则被浏览器静默忽略——根本原因是列数不匹配。浏览器不会报错，但布局退化为普通文档流。
检查三件事：
• grid-template-columns 定义了几列（比如 240px 1fr 就是 2 列）
• 每行引号里的区域名数量必须等于这个数（不能多、不能少）
• 空位必须用 . 占位，别留空格或直接空着
区域名本身也要合法：stats ✅，user-stats ❌，1stats ❌；大小写、标点不一致也会让 grid-area: stats 失效。
主内容区用 repeat(auto-fill, minmax(280px, 1fr)) 而非 auto-fit
auto-fill 和 auto-fit 表面相似，行为却关键不同：前者保留空轨道，后者收缩掉空轨道。这对 Dashboard 卡片排布影响极大。
立即学习“前端免费学习笔记（深入）”；
小屏下若用 auto-fit，浏览器会把剩余空间全分给可见卡片，强行拉宽它们，文字挤成一团、图标热区变小；而 auto-fill 坚持最小宽度约束，只在「能放下完整卡片」时才增加列数。
minmax(280px, 1fr) 中的 280px 是实测底线：
• 小于 200px → 文字频繁换行、行高失控
• 大于 350px → iPad 竖屏（768px）只剩 2 列，空间浪费严重
• 绝对不要给卡片子元素设 width: 300px 这类固定值，它会破坏 Grid 自动分配逻辑
@media 中必须同步更新 grid-template-areas、columns 和 rows
只改 grid-template-areas 而不更新 grid-template-columns 或 grid-template-rows，是响应式翻车最常见原因。
比如移动端想收起侧边栏，写成：
@media (max-width: 768px) {
.dashboard {
grid-template-areas: "header" "main" "sidebar";
}
}
这不行——grid-template-columns 还是 240px 1fr，但 grid-template-areas 已变成单列，浏览器无法映射，布局崩掉。
正确做法是整套重写：
• 先定义窄屏结构：grid-template-areas: "header" "main" "sidebar"
• 同步设 grid-template-columns: 1fr、grid-template-rows: auto 1fr auto
按语义角色命名区域，而非视觉位置
用 "header sidebar main footer" 这类按视觉顺序命名的方式，加个广告位或切换暗色模式就得重写整个 grid-template-areas 字符串。
真正省事的是按语义角色命名：banner、nav、content、aside、cta、footer。这样即使把 aside 从右边挪到左边，或者在移动端收进抽屉，grid-area: aside 这行 CSS 完全不用动，只改 grid-template-areas 的字符串布局即可。
命名要点：
• 避免带方位词（如 left-sidebar），优先用功能词（filters、stats）
• . 是安全占位符，" . filters . " 比留空更可靠
• 别在 JS 里动态拼接 grid-template-areas 字符串——CSS Custom Properties 不支持该属性，只能靠 style.gridTemplateAreas 手动设，易出错
最常被忽略的是：网格轨道定义的是可用空间，不是内容尺寸。卡片高度不固定时，grid-auto-rows: 200px 只管新增行，撑开的内容会让下面的行被顶开、列对不齐——这不是 bug，是设计使然。真要控高，得用 minmax(240px, max-content) 或显式声明每行高度。
