推荐拆分使用 grid-template-rows、grid-template-columns 和 grid-template-areas：前者定义轨道，后者声明语义区域，三者组合等价于完整 grid-template，且更清晰可靠、不易出错。
grid-template-rows 和 grid-template-columns 怎么写才不混乱
直接用 grid-template 一次性定义行列和区域，容易写错顺序、漏掉斜杠、混淆轨道数和区域名。更稳的做法是拆开写：grid-template-rows 和 grid-template-columns 单独控制轨道，再用 grid-template-areas 布局语义区域——三者合起来才是完整的 grid-template 等价写法。
比如要 3 行 4 列的均分网格：
grid-template-rows: 1fr 1fr 1fr;<br>grid-template-columns: 1fr 1fr 1fr 1fr;
注意：不要写成 grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr 1fr，这会漏掉 grid-template-areas，且语法上它只接受「行线定义 / 列线定义 / 区域定义」三段，缺一段就变成无效声明（浏览器会忽略整条规则）。
用 grid-template-areas 快速可视化多行多列结构
适合内容区域明确、行列数固定的情况，比如仪表盘、卡片墙、后台布局。每个字符串代表一行，每个单词代表一个单元格的区域名，空字符串 "." 表示空白格。
立即学习“前端免费学习笔记（深入）”；
例如 2 行 3 列，中间留空：
grid-template-areas:<br> "header header header"<br> "main . sidebar";
对应需给子元素加 grid-area：
.header { grid-area: header; }<br>.main { grid-area: main; }<br>.sidebar { grid-area: sidebar; }
- 区域名不能含空格或特殊符号，只能是字母、数字、短横线
- 每行字符串数量必须一致，否则整条
grid-template-areas失效 - 同一区域名可在多格中重复出现，实现跨行跨列（如
"header header header"就是跨 3 列）
grid-template 写全时的顺序和斜杠不能错
grid-template 是简写，格式严格为：grid-template: <rows> / <columns> / <areas></areas></columns></rows>，中间两个斜杠缺一不可，且顺序固定——行定义在前，列定义居中，区域定义在最后。
下面这个是合法的全写：
grid-template:<br> "header header header" 100px<br> "main . sidebar" 200px<br> "footer footer footer" 60px<br> / 1fr 200px 1fr;
说明：
- 每行引号内是
grid-template-areas的一行 - 每行末尾的长度值（如
100px）是该行的grid-template-rows值 - 最后一行
/后是grid-template-columns - 这种写法虽紧凑，但一旦引号对不上、斜杠少一个、或行列数与区域字符串列数不匹配，整个声明就静默失效
多行多列响应式时别硬套 grid-template
用 grid-template-areas 或全写 grid-template 定义固定结构后，想在小屏变单列？别试图在媒体查询里重写一整套 grid-template——容易漏掉某条规则导致回退到 auto-flow。
更可靠的方式是：
- 保持
grid-template-columns用repeat(auto-fit, minmax(300px, 1fr)))这类弹性写法 - 把
grid-template-areas拆成独立规则，在媒体查询里只覆盖它（其他轨道保持不变） - 避免在
grid-template全写中混用函数（如minmax()），它不支持；必须用grid-template-columns单独写
真正难的不是写几行几列，而是当列数随屏幕变化、区域需要重组、又有合并单元格需求时，grid-template-areas 的字符串结构会迅速变得难以维护。这时候不如回归 grid-column / grid-row 显式定位，配合 grid-auto-flow: dense 控制填空逻辑。
