最可控的整页布局方案是用grid-template-areas划分语义区块，再以grid-row-start/row-end显式控制跨行；必须声明grid-template-rows提供行锚点，避免auto-fill等自动函数因无行轨道导致跨行失效。
直接用 grid-template-areas 划整页语义区块 + grid-row-start/grid-row-end 控制局部跨行，是最可控、最不易翻车的组合。 想靠 auto-fit 或纯命名线硬凑不规则形状，大概率会卡在响应式断点或动态内容上。
为什么不能只靠 repeat(auto-fill, ...) 做不规则布局
这类自动列生成函数只管列数，不管行结构。一旦需要某个卡片跨 2 行、另一个跨 3 行、右侧工具栏固定占首行——auto-fill 就彻底失效：它不定义行轨道，grid-row: 1 / 3 可能指向根本不存在的行线。
常见症状：grid-row-start 写了但元素不动、高度塌陷、小屏下错位飞出容器外。
根本原因：隐式行轨道在动态内容下不稳定，尤其配合 JS 渲染图表或异步加载数据时。
- 必须显式声明
grid-template-rows，例如grid-template-rows: 60px 1fr 1fr，给跨行提供明确锚点 - 用
-1表示末尾行线（如grid-row: 1 / -1），比硬写数字更健壮 - 避免混用
span和行号：如grid-row: 2 / span 2在无显式行定义时行为不可控
grid-template-areas 失效的三个静默陷阱
写了却没反应？不是语法错，是浏览器直接跳过整条规则。检查这三点：
— 每行引号内区域名数量是否严格一致？漏写 . 占位或少写一个词（如 "header main" vs "header main sidebar"）都会导致失效
— 子元素的 grid-area 值是否与区域名**逐字符完全匹配**？user-stats ≠ userStats ≠ "user-stats"（引号是错的）
— 父容器是否真有 display: grid？被父级 flex 或其他规则覆盖时，整个网格上下文就不存在
- 用
getComputedStyle(container).gridTemplateAreas查返回值，若为"none"就确认被丢弃了 - 移动端收起侧边栏时，不能只改
grid-template-areas: "header" "main"，还必须确保子元素的grid-area仍指向header或main这类有效名字 - 隐藏非核心模块，优先用
grid-area: none或display: none，别留空或用visibility: hidden
跨行 + 跨列 + 自适应宽度的真实组合写法
一个典型后台面板：左侧主图表区（跨全部行）、顶部操作栏（仅第 1 行）、右下状态面板（占第 2–3 行）、右侧固定宽侧边栏（240px）。关键不在“怎么写”，而在“谁控制谁”：
外层容器用 grid-template-areas 定义大块：“header header sidebar” “main main sidebar” “footer footer sidebar”；
其中 .main 内部再嵌套一层 Grid，并显式设 grid-template-rows: 60px 1fr 1fr，再用 grid-row 精确落位子项。
-
.main容器本身设grid-area: main，不参与外层列计算 -
.toolbar写grid-row: 1; grid-column: 1 / -1，横跨主内容区全宽 -
.status写grid-row: 2 / -1; grid-column: 2，从第 2 行线开始撑到底 - 所有图表容器加
min-height: 200px，防空数据时塌陷；aspect-ratio仅作比例约束，不替代最小高度
真正难的不是写对某一行代码，而是意识到：Grid 的稳定来自**显式声明轨道**，而非依赖内容推导。任何想绕过 grid-template-rows 或 grid-template-columns 直接靠子项“自己伸缩”的做法，在后台仪表盘这种多数据源、多尺寸组件混合的场景里，迟早会暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
