使用CSS Grid时如何让最后一行元素自适应填充整行宽度

嘿，你想要的效果完全可以用CSS Grid实现，而且还能保留grid-gap的便利，不用像Flexbox那样写负边距的hack！

先看你提到的Flexbox实现，核心是flex-grow:1让剩余空间分配给最后一行的元素。在Grid里，我们可以通过auto-fit结合minmax()来达到同样的效果，同时完美利用grid-gap。

解决方案代码 #

.container {
  display: grid;
  /* 核心：auto-fit + minmax 组合实现自适应列宽 */
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
  grid-gap: 1%; /* 直接用grid-gap，无需负边距hack */
  margin: 10px 0;
}

.item {
  background: #eee;
  padding: 40px;
}

<h2>Grid auto fitting last row elements</h2>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

原理解释 #

• repeat(auto-fit, minmax(25%, 1fr))是实现效果的关键：

  1. minmax(25%, 1fr)定义了每列的最小宽度为容器的25%（保证每行最多4个元素），最大宽度为1fr（剩余空间等分分配）。
  2. auto-fit会自动创建足够多的列来填满容器；当最后一行元素数量不足时，它会折叠空的列轨道，让剩下的元素自动扩展宽度，平分整个容器的可用空间，正好达到你要的最后一行填满效果。

• 对比你原来的Grid写法：如果只是固定grid-template-columns: repeat(4, 25%)，最后一行的元素会保持25%宽度，空出的空间无法被利用，而auto-fit + minmax完美解决了这个问题。

额外说明 #

如果你的元素需要固定最小像素宽度（比如minmax(200px, 1fr)），这个方法同样适用——它会自动根据容器宽度调整列数，最后一行元素依然会扩展填满整行，灵活性拉满。

这样既保留了CSS Grid的grid-gap优势，又实现了和Flexbox一样的最后一行元素扩展效果，完全不用hack~

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