使用grid-template-rows: repeat(auto-fit, minmax(100px,1fr))后最后两行仅27px高？

我在固定高度（600px）的容器中使用CSS Grid布局，想通过grid-template-rows: repeat(auto-fit, minmax(100px, 1fr))让每行至少100px并均匀分配高度，但容器内的8个项目中，最后两个仅获得约27px的高度，完整代码如下：

.container {
  height: 600px;
  width: 500px;
  margin: 200px auto;
  background-color: black;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

.box {
  color: white;
  font-size: 1.5rem;
  text-align: center;
}

<body>
  <div class="container">
<div class="box" style="background-color: #e53935">FIRST</div>
<div class="box" style="background-color: #d81b60">SECOND</div>
<div class="box" style="background-color: #8e24aa">THIRD</div>
<div class="box" style="background-color: #5e35b1">FOURTH</div>
<div class="box" style="background-color: #3949ab">FIFTH</div>
<div class="box" style="background-color: #1e88e5">SIXTH</div>
<div class="box" style="background-color: #00acc1">SEVENTH</div>
<div class="box" style="background-color: #00897b">EIGHTH</div>
  </div>
</body>

问题根源 #

repeat(auto-fit, minmax(100px, 1fr))的逻辑是根据容器空间创建尽可能多的满足最小尺寸的轨道，而非根据项目数量分配轨道：

1. 你的容器高度为600px，minmax(100px, 1fr)要求每行至少100px，因此浏览器会先创建6个刚好填满容器的轨道（6×100px=600px）。
2. 但你有8个项目，Grid会自动新增2个轨道（默认grid-auto-rows: auto），此时总轨道数达到8个。
3. 由于容器高度固定为600px，无法容纳6个100px轨道+2个自动轨道，浏览器会强制压缩所有轨道的高度，最终所有轨道高度总和为600px，导致后两个轨道被压缩至约27px。

解决方案 #

根据你的需求，有两种常见处理方式：

1. 强制所有项目均匀分配容器高度（不限制最小行高）

直接指定轨道数量为项目数，用1fr均匀分配高度：

.container {
  /* ... 其他样式不变 */
  grid-template-rows: repeat(8, 1fr); /* 8个项目对应8个轨道，每个占1/8高度 */
}

此时每个项目高度为75px（600÷8），均匀分配容器空间。

2. 保持每行至少100px，高度不足时滚动

如果想保留“每行至少100px”的规则，同时避免轨道被压缩，可设置自动轨道的最小高度，并给容器添加滚动：

.container {
  /* ... 其他样式不变 */
  grid-auto-rows: minmax(100px, 1fr); /* 自动创建的轨道也遵循最小高度规则 */
  overflow-y: auto; /* 高度不足时显示垂直滚动条 */
}

此时8个项目需要800px高度，容器会出现滚动条，每个项目保持100px高度。

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