grid-template 一行定义行列与区域，语法为 grid-template: [行] [区域] / [列]；grid 是 grid-template 等五属性缩写，三段斜杠分隔；grid-area 四值定位更可靠，但命名与线性模式不可混用。
grid-template 一行写清行列结构
多数人用 grid-template-rows 和 grid-template-columns 分开写，结果样式表变长、重复声明多，还容易漏掉 grid-template-areas 的同步更新。
直接用 grid-template 一次性定义三者，语法是：grid-template: [行定义] / [列定义];，中间用 / 隔开；如果要加命名区域，就写成三段式：grid-template: [行定义] [区域定义] / [列定义];
-
grid-template: "header header" 80px "main sidebar" 1fr / 1fr 200px;—— 定义两行两列 + 区域名，"header header"是第一行的区域分配，80px是该行高 - 省略区域定义时（比如没用
grid-area），第二部分可直接跳过：grid-template: 100px 1fr / 200px 1fr; - 注意：一旦用了
grid-template，它会**重置**grid-template-rows、grid-template-columns和grid-template-areas为初始值，别再单独设它们，否则被忽略
grid 一次配齐容器所有布局参数
grid 是 grid-template + grid-gap + grid-auto-flow + grid-auto-rows + grid-auto-columns 的缩写，适合快速初始化一个 Grid 容器，但极易因参数顺序或缺失导致意外行为。
完整语法是：grid: <em>[grid-template]</em> / <em>[grid-gap]</em> / <em>[grid-auto-flow]</em> [grid-auto-rows] / [grid-auto-columns]; —— 斜杠分三段，分别对应模板、间隙、自动布局规则
- 最简写法：
grid: 100px 1fr / 200px 1fr;，等价于只设grid-template，其余用默认值 - 带间隙和流向：
grid: "a a" 60px "b c" 1fr / 1fr 1fr / column 100px / 200px;—— 注意第三段column 100px是grid-auto-flow column+grid-auto-rows: 100px，最后的200px是grid-auto-columns - 常见错误：漏掉某一段时斜杠不能空着，比如只想要间隙和模板，不能写
grid: ... / 10px /;，必须写全或省略后半部分：grid: ... / 10px;
grid-area 缩写定位比单独设更可靠
给子元素设位置，有人分开写 grid-row-start、grid-column-end 等四个属性，既啰嗦又容易漏掉某个“-end”，导致跨距异常（比如只设 grid-row-start 没设 grid-row-end，就会默认跨 1 格，但你可能想要跨满）。
grid-area 用四个值按顺序定义： grid-row-start / grid-column-start / grid-row-end / grid-column-end
-
grid-area: 2 / 1 / 3 / -1;—— 第二行起、第一列起、第三行前结束（即占第2行）、一直延伸到最后一列 - 支持 span 语法：
grid-area: 1 / 2 / span 2 / span 3;—— 从第1行第2列开始，向下跨2行、向右跨3列 - 如果元素已用
grid-area: "sidebar";命名，那容器里grid-template-areas必须匹配，否则定位失效——命名模式和线性数值模式不能混用在同一元素上
缩写不是万能，这些地方千万别硬套
缩写省事，但牺牲了可读性和局部控制力。有些场景下展开写反而更稳。
- 动态修改某一项时（比如 JS 改
grid-template-columns），用缩写grid会把其他隐式值也刷掉，导致grid-auto-flow回退到row或间隙丢失 - CSS 自定义属性（
--gap-size）没法直接塞进grid缩写里，因为它的解析是静态的，grid: ... / var(--gap-size);可以，但grid: ... / var(--gap-size) / ...;中间段若含变量，浏览器兼容性差（Safari 15.4 之前不支持） - 调试时，DevTools 显示缩写属性会展开成多个独立声明，但出问题时往往报错在
grid这一行，看不出具体哪段语法错——比如少了个引号、多了一个斜杠，得手动拆开验证
真正省时间的地方，是初始化布局结构；反复调整、协作维护、需要精细控制流向或响应式断点时，宁可多写两行，别贪那一两个字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
