grid-template-areas 必须与 grid-template-columns 列数严格对齐，否则整条规则被静默忽略；每行区域名数量须等于列数，空位用 . 占位；区域名需合法且大小写、标点一致；主内容区应使用 repeat(auto-fill, minmax(280px, 1fr)) 而非 auto-fit，以保障小屏卡片最小宽度；响应式需同步更新 grid-template-areas、columns 和 rows；侧边栏应脱离 auto-fill，用 grid-area 显式声明，并注意溢出和间隙适配。
grid-template-areas 必须和 grid-template-columns 列数严格对齐
写完 grid-template-areas: "header header" "nav main" 却发现布局横着排成一行？大概率是列数没对齐。浏览器不会报错，但会静默忽略整条 grid-template-areas 规则，退化为普通流布局。
检查三件事：
• grid-template-columns 定义了几列（比如 240px 1fr 就是 2 列）
• 每行引号里的区域名数量必须等于这个数（不能多也不能少）
• 空位必须用 . 占位，别留空格或直接空着
区域名本身也要合法：userStats ✅，user-stats ❌，1stats ❌。拼写大小写、标点不一致也会导致 grid-area 失效。
主内容区用 repeat(auto-fill, minmax(280px, 1fr)) 而不是 auto-fit
auto-fill 和 auto-fit 表面相似，但行为关键不同：前者保留空轨道，后者收缩掉空轨道——这对仪表盘卡片至关重要。
小屏下如果用了 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
• 侧边栏隐藏不用 display: none，它仍占轨道；要用媒体查询重新分配区域
侧边栏必须脱离 auto-fill，用 grid-area 显式声明
侧边栏高度通常和主内容不一致，硬塞进 repeat(auto-fill, ...) 会导致列数计算异常，甚至把导航菜单压成一条线。
外层容器用 grid-template-areas 划分整体骨架，例如：
•
"header header"<br>"nav main"<br>"footer footer"
•
grid-template-columns: 240px 1fr•
nav 区域设 grid-area: nav，宽度锁定，不参与动态列数
主内容区（main）再嵌套一层 Grid，在里面才用 repeat(auto-fill, minmax(280px, 1fr))。这样既解耦，又避免 Safari iOS 16+ 上因嵌套 display: flex 引发的渲染空白。
侧边栏内若含长列表，记得加 overflow-y: auto，否则内容会被裁剪；移动端需调低 gap 值（比如 0.75rem），否则间隙吞掉太多可用宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
