定义轨道：fr、minmax、repeat 与 auto-fill / auto-fit
Grid 的第一步是用 grid-template-columns / grid-template-rows 列出每条轨道的尺寸。轨道之间的分界是网格线，从 1 开始编号。尺寸可以是固定 <length>、内容驱动的 auto / min-content /
max-content，或弹性的 fr。本页聚焦两件最易被误解的事：fr 到底按什么分配剩余空间，以及 repeat() 配 minmax() 与 auto-fill / auto-fit 如何自动决定列数。所有读数都来自
getComputedStyle(grid).gridTemplateColumns——即引擎解析后的真实像素。
fr 不是「等分容器」，而是「等分剩余空间」。 引擎先给固定轨道（px / % / auto 的内容尺寸）与所有 gap 留足空间，把剩下的按各 fr 的份额比例分配。所以 120px 1fr 1fr 里两条
1fr 平分的是「容器宽 − 120px − 两条 gap」，而不是容器宽的一半。
1 · fr 份额：改模板看引擎解析后的 px
容器定宽，下方读数是 getComputedStyle 读回的每条轨道实际像素。改模板或拖容器宽，观察 fr 轨道如何吸收余量、固定轨道如何不变。
2 · 响应式列数：repeat(auto-fill / auto-fit, minmax(…))
要「列宽不低于某值、容器变宽就自动加列」，经典写法是 repeat(auto-fill, minmax(160px, 1fr))：每条列至少 160px、至多 1fr，引擎据容器宽塞进尽可能多的列。auto-fill 与 auto-fit 仅在项数少于可容纳列数时不同——拖宽到出现空轨即可看出。
auto-fill vs auto-fit 的唯一区别：空轨怎么办。 项不够填满时，auto-fill 保留那些空轨道（项维持原宽，右侧留白）;auto-fit 把空轨塌成 0（minmax 的上限
1fr 于是把空间全给现有项，项被拉宽占满整行）。项数足够多时两者表现一致。需要「项始终占满整行」选 auto-fit；需要「保持统一列宽、不被拉伸」选 auto-fill。
3 · 轨道尺寸的取值小结
| 取值 | 含义 | 是否吸收剩余空间 |
|---|---|---|
<length> |
固定尺寸(120px / 4rem)。 |
否 |
<percentage> |
相对容器对应维度的百分比。 | 否（先占位） |
auto |
由内容撑开；在对齐 / fr 缺席时也可拉伸。 |
近似（无 fr 时） |
min-content / max-content |
内容的最小 / 最大固有尺寸。 | 否 |
<flex>(fr) |
剩余空间的份额。 | 是 |
minmax(a, b) |
在 [a, b] 间伸缩，常配 1fr 作上限。 |
视 b 而定 |
fit-content(x) |
≈ min(max-content, max(min-content, x))，内容少时收窄、多时封顶。 |
否 |
放置好轨道后，下一步是把项放进网格线围成的单元——见 基于网格线的放置；若想给单元命名而非数线号，见 grid-template-areas。