如何实现CSS Grid中行内不足列数的项自动撑满整行？

要实现你需要的效果，无需复杂的选择器判断，结合CSS变量和grid-template-columns的auto-fit+minmax组合即可完美适配动态列数与子项数量，具体方案如下：

核心思路 #

通过--max-columns变量定义每行最大列数，利用repeat(auto-fit, minmax(calc(100% / var(--max-columns)), 1fr))设置网格列：

• 当子项数量 ≥ 最大列数时，每行自动排满设定的列数，每个子项占1/最大列数宽度
• 当子项数量 < 最大列数时，auto-fit会折叠空的网格轨道，剩余子项自动均分整行宽度

完整实现代码 #

CSS 代码 #

/* 定义全局CSS变量控制最大列数，可随时修改 */
:root {
  --max-columns: 4;
  --grid-gap: 8px;
}

.box {
  background-color: red;
  padding: 20px;
  border: solid 1px black;
}

.grid {
  display: grid;
  /* 核心：自动适配列数，子项最小宽度为1/最大列数，最大为1fr */
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--max-columns)), 1fr));
  gap: var(--grid-gap);
}

HTML 代码 #

<h1>Grid（4列，4个子项）</h1>
<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<h1>Grid（4列，3个子项）</h1>
<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<h1>Grid（4列，2个子项）</h1>
<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
</div>

<h1>Grid（4列，5个子项）</h1>
<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<!-- 动态修改列数示例：3列 -->
<h1>Grid（3列，2个子项）</h1>
<div class="grid" style="--max-columns: 3;">
  <div class="box"></div>
  <div class="box"></div>
</div>

效果说明 #

• 当子项数量等于或超过--max-columns时，每行排满设定列数，每个子项宽度均等（如4列4子项时各占25%，5子项时前4个各25%，第5个占100%）
• 当子项数量少于--max-columns时，子项自动均分整行宽度（如4列3子项时各占约33.33%，2子项时各占50%）
• 修改--max-columns变量值即可快速切换网格最大列数，完全适配动态场景

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