最简九宫格写法是grid-template: 3em / 3em，等价于三行三列均设为3em，需确保行列等值、无命名区域且父容器有宽高约束。
grid-template: 三行三列最简写法就是 grid-template: 3em / 3em
这个写法成立的前提是：所有行高和列宽完全相等，且你不需要命名区域或指定轨道大小单位以外的复杂逻辑。它等价于 grid-template-rows: 3em 3em 3em 和 grid-template-columns: 3em 3em 3em 的合并简写。
注意：grid-template 是复合属性，语法为 grid-template: ，中间必须有斜杠分隔，不能省略。
- 如果用
fr单位（比如均分容器），写成grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr—— 这不算“最简”，因为重复了三次；更简的是grid-template: repeat(3, 1fr) / repeat(3, 1fr) - 若混用单位（如第一行固定、后两行自适应），就不能用单斜杠简写，必须拆开写
grid-template-rows和grid-template-columns -
grid-template会重置grid-template-areas，所以别在已有命名区域的布局里直接套用这个简写
为什么不用 grid: 3em / 3em？
grid 是 grid-template 的超集，但它还会同时重置 grid-gap（已废弃，现为 gap）和 grid-auto-* 系列属性。哪怕你只写两个值，浏览器也会把 grid-auto-rows 和 grid-auto-columns 重置为 auto —— 这在嵌套或动态子项场景下容易出 bug。
- 显式写
grid-template: 3em / 3em更安全，只动你想动的部分 - 如果真要用
grid简写，至少得补全三个部分：grid: 3em / 3em / auto（第三个值对应grid-auto-flow），但这反而更啰嗦 - 多数现代编辑器对
grid-template的自动补全支持更好，写错概率更低
九宫格内容怎么塞进去？靠 grid-area 还是默认流？
纯九宫格展示，通常不需要手动定位每个格子 —— CSS Grid 默认按源顺序逐行填满，只要子元素是直接子项，就会自然形成 3×3 布局。
- 确保容器设了
display: grid和grid-template: 3em / 3em - 子元素不要加
grid-row/grid-column，否则可能跳格或重叠 - 如果想让某个子项跨行/跨列（比如中间大图），再单独加
grid-row: 2 / 4这类声明，不影响其他格子自动排列 - 注意：若子元素少于 9 个，空位仍会保留（因为轨道已定义），这不是 bug，是预期行为
兼容性与隐含陷阱
这个写法在所有支持 Grid 的浏览器中都有效（Chrome 57+、Firefox 52+、Safari 10.1+），但有两个易忽略点：
- 父容器必须有明确宽度/高度，否则
3em这种绝对单位可能导致整体缩成一团；建议配合width: max-content或包裹在弹性容器里 -
em是相对于父元素 font-size 的，如果父级 font-size 是 16px，那3em就是 48px —— 看似简单，实际尺寸可能偏离直觉，用px或rem更可控 - 如果后续要响应式（比如小屏变单列），别在媒体查询里只改
grid-template，记得同步调整grid-auto-flow: column或加grid-template-rows: none配合grid-auto-rows
真正最简的九宫格，往往就一行声明加一个 display，但单位选错、父容器没约束、或者误用 grid 而非 grid-template，才是卡住人的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
