如何让CSS Grid最后一行自动填充未占满的列？

要让CSS Grid在条目数量与设定列数不匹配时，自动拉伸最后一行元素填满容器，有两种常用方案：

方案一：灵活自适应列数（推荐） #

通过auto-fit结合minmax()实现，既能固定最大列数，又能让不足一行的元素自动平分容器宽度。

代码示例 #

.grid-container {
  /* 自定义列数和间距 */
  --max-columns: 3;
  --gap: 1rem;
  
  display: grid;
  /* 计算每列最小宽度，确保最多显示设定的列数 */
  grid-template-columns: repeat(auto-fit, minmax(
    calc(100% / var(--max-columns) - var(--gap) * (var(--max-columns) - 1) / var(--max-columns)),
    1fr
  ));
  gap: var(--gap);
  padding: 1rem;
}

.grid-item {
  padding: 2rem;
  background: #eee;
  text-align: center;
}

原理说明 #

• auto-fit：自动调整列的数量，容器空间足够时显示设定的最大列数，空间不足时自动减少列数。
• minmax()：定义列宽范围，最小值保证最多显示设定列数，最大值1fr让剩余空间被元素平分，实现最后一行元素填满容器。
• CSS变量可快速修改列数和间距，适配不同场景。

方案二：固定列数下调整最后一行 #

如果需要固定列数（比如始终显示3列），可以通过CSS选择器针对最后一行元素单独设置跨度：

代码示例 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.grid-item {
  padding: 2rem;
  background: #eee;
  text-align: center;
}

/* 最后一行仅1个元素时，占满3列 */
.grid-container > :nth-last-child(1):nth-child(3n + 1) {
  grid-column: span 3;
}

/* 最后一行有2个元素时，各占1.5列 */
.grid-container > :nth-last-child(2):nth-child(3n + 1),
.grid-container > :nth-last-child(2):nth-child(3n + 1) ~ * {
  grid-column: span 1.5;
}

注意事项 #

这种方法需要提前确定列数，元素数量变化时需对应调整选择器，适合列数固定的场景。

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