为何grid-template-rows轨道模式无法像grid-template-columns那样重复？

咱们先拆解一下问题的核心：这其实是CSS Grid里显式网格和隐式网格的规则差异导致的。

先明确两个关键概念 #

• grid-template-columns / grid-template-rows：用来定义显式网格轨道——就是你明确指定了数量和尺寸的行或列。
• 当网格项的数量超过显式网格能容纳的总数时，浏览器会自动生成隐式网格轨道来放置剩下的元素，这些轨道的默认尺寸是auto（会根据内容自适应高度/宽度）。

你的代码场景分析 #

看你写的CSS：

.grid{
 display: grid;
 grid-template-columns: 1fr 1fr 1fr; /* 显式定义了3列，每列1fr */
 grid-template-rows: 600px 1fr 100px; /* 显式定义了3行，对应尺寸分别是600px、1fr、100px */
 grid-gap: 20px;
}

你总共有20个网格项，按3列排列的话，总共需要7行（3×6=18，第7行放2个）。显式网格只定义了前3行，剩下的4行全都是隐式行轨道。

那为什么列看起来像是“自动重复”？其实不是重复，而是你固定了3列的数量，所有网格项都会在这3列里循环排列——列的总数是固定的3列，所以每一行都复用这3列的规则，不会触发隐式列的创建。

而显式行只有3行，当网格项数量超过3×3=9个时，后面的元素就会被放到浏览器自动创建的隐式行里，这些行默认用auto尺寸，你看到的“1fr”其实是因为你的<h1>内容高度一致，看起来像是均分了空间，本质是自适应内容的auto。

怎么让行轨道也重复你的规则？ #

如果你想让所有行都遵循600px 1fr 100px的重复模式，可以分两种情况处理：

1. 容器有固定高度：用repeat(auto-fill, ...)来让浏览器自动填充足够的重复行轨道：

.grid{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(auto-fill, 600px 1fr 100px);
 grid-gap: 20px;
}

2. 容器高度自适应：设置grid-auto-rows来指定隐式行的尺寸，比如让所有隐式行也用1fr：

.grid{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: 600px 1fr 100px;
 grid-auto-rows: 1fr; /* 所有隐式行都用1fr尺寸 */
 grid-gap: 20px;
}

内容的提问来源于stack exchange，提问作者justin