grid-template 简写会覆盖 grid-auto-rows、grid-auto-columns 和 grid-auto-flow 为初始值（auto、auto、row），并非仅设置显式部分，而是清空隐式行为；grid 简写更激进，还强制重置所有相关属性。
grid-template 简写会覆盖哪些隐式属性
用 grid-template 一次性设 grid-template-rows、grid-template-columns 和 grid-template-areas，但会把 grid-auto-rows、grid-auto-columns、grid-auto-flow 全部重置为初始值（auto 和 row）。这不是“只设显式部分”，而是真·清空隐式行为。
- 如果你之前设过
grid-auto-columns: 1fr，再写grid-template: "a b" / 100px 1fr，自动列就变回auto了 - 想保留
grid-auto-flow: column？必须在grid-template之后显式再写一遍 - 简写 ≠ 增量设置，它是一次性全量声明，漏掉的就按默认来
grid 简写比 grid-template 更激进
grid 是终极简写，能同时控制显式网格、隐式网格和排列方向。但它会强制重置所有相关属性，包括你可能没意识到正在用的那些。
- 写
grid: 100px 200px / 1fr 2fr，等价于：grid-template-rows: 100px 200px+grid-template-columns: 1fr 2fr+grid-auto-rows: auto+grid-auto-columns: auto+grid-auto-flow: row - 如果页面其他地方依赖
grid-auto-flow: dense，这里一写grid就丢了 - 浏览器兼容性上，
grid简写在 Safari 15.4+ 才稳定支持grid-auto-flow部分；旧版 Safari 会静默忽略整条声明
什么时候该用简写，什么时候该拆开写
简写适合初始化布局骨架，比如组件顶层容器；但凡涉及动态调整、继承已有规则、或需要微调隐式行为，就该拆。
- 组件封装时用
grid-template定义区域结构，再单独设grid-auto-rows: minmax(40px, auto)控制新增行高度 - 响应式中避免在
@media里用grid全量重写，改用grid-template-rows或grid-auto-flow单独覆盖 - 调试时发现格子错位，优先检查是不是
grid简写无意中把grid-auto-columns覆盖成了auto，导致新列宽度崩掉
grid-area 不能靠简写“顺带”设置
grid-area 是独立属性，不参与任何网格简写。有人以为写 grid: "a a" "b c" / 1fr 2fr 就能定义区域位置，其实这只是 grid-template-areas + grid-template-columns 的组合，grid-area 还得单独给子元素加。
立即学习“前端免费学习笔记（深入）”；
-
grid-area: "a"是合法的，表示该元素占一个叫a的命名区域 - 但
grid: "a a" / 1fr不会让子元素自动进入a区域，它只定义模板，不分配元素 - 常见错误：父容器写了
grid-template-areas: "header header" "main aside"，却忘了给<header>元素加grid-area: header，结果内容堆在左上角
grid 一行声明把 grid-auto-rows 悄悄打回原形了。 
