grid-template-columns 和 grid-template-rows 必须写在 display: grid 的容器上，值为轨道尺寸（如 100px、1fr、auto、minmax()），支持 repeat()；混用 fr 与 % 时需注意 fr 基于剩余空间计算，线编号从容器边缘起始，负值和 span 可简化定位。
grid-template-columns 和 grid-template-rows 怎么写才生效
这两个属性是定义网格骨架的核心，必须写在容器（即设置 display: grid 的父元素）上，子元素不会继承也不会触发它们。值不是“列宽”或“行高”的绝对数值，而是轨道（track）的尺寸描述，支持 px、fr、auto、minmax() 等多种单位组合。
常见错误是把它们当成子项的样式写在 item 上，或者漏掉容器的 display: grid —— 这时整个声明完全被忽略，页面表现和普通流一样。
-
grid-template-columns: 100px 1fr 2fr表示三列：第一列固定 100px，后两列按 1:2 占满剩余空间 -
grid-template-rows: auto 100px表示两行：第一行高度由内容撑开，第二行固定 100px - 用
repeat(3, 1fr)比写1fr 1fr 1fr更简洁，也支持repeat(auto-fit, minmax(200px, 1fr)))实现响应式列数自动调整
为什么设置了 grid-template-rows 却看不到多行效果
Grid 默认只创建一行（隐式行），即使你写了 grid-template-rows: 50px 50px，但所有子项仍默认放在第一行里——除非显式指定位置，或子项数量超过单行容量。
真正触发多行显示的方式有三种：
- 给子项加
grid-row-start/grid-row-end，比如grid-row: 2 / 3让它进第二行 - 使用
grid-auto-flow: row（默认值）并让子项自然换行：当第一行放不下更多项时，Grid 会自动创建新行（但前提是没设grid-template-rows固定行数，否则超出部分进入隐式网格） - 配合
grid-auto-rows控制隐式行高度，例如grid-auto-rows: 60px，这样新增的行才有可见高度
fr 单位和百分比在 grid-template-columns 里混用要注意什么
fr 是“剩余空间分配单位”，不是百分比；它只对容器内未被固定尺寸占用的剩余空间起作用。一旦混用 % 或 px，计算逻辑就容易出错。
比如 grid-template-columns: 20% 1fr 2fr 中，20% 先从容器宽度中扣掉 20%，剩下 80% 才交给 1fr 和 2fr 分（即 80% × 1/3 ≈ 26.7%，80% × 2/3 ≈ 53.3%）。这不是“20% + 33% + 66%”，总和会超 100%。
- 想严格按比例布局，统一用
fr：2fr 1fr 1fr表示 50% : 25% : 25% - 想留白+自适应，用
minmax()更可靠：minmax(200px, 1fr) 1fr - 避免在同一个
grid-template-columns值里混用fr和%，除非你明确知道剩余空间如何计算
grid-column 和 grid-row 的起止值怎么数
Grid 线（line）编号从容器边缘开始：最左边是第 1 条线，向右依次为 2、3……；最上面是第 1 条线，向下为 2、3……。所以 grid-column: 1 / 3 表示从第 1 条线开始，到第 3 条线结束，跨两列（即第 1 列和第 2 列）。
容易混淆的是负值和 span 语法：
-
grid-row: -2 / -1是倒数第二条线到倒数第一条线，即最后一行 -
grid-column: span 2等价于auto / span 2，表示从当前位置向右跨 2 列，不指定起点时由 Grid 自动放置 - 起点可以省略（写成
/ 2），但终点不能单独写成2—— 那会被解析为2 / 3，即只占一格
线编号是理解 Grid 定位的基础，画个草图标上线号，比死记规则快得多。实际项目中，用 grid-area 配合命名区域往往更直观，但线编号逻辑逃不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
