如何在CSS Grid中实现类似justify-content: space-between的效果

问题说明 #

你当前的代码无法达成预期效果，原因是justify-content: space-between在CSS Grid中是控制整个网格容器在父元素内的对齐，而非分配网格项之间的空隙。你定义了12个等宽1fr列，3个各占3列的项目仅用掉9列，剩余3列会全部留在网格右侧，无法实现两边对齐、中间间隙均等的效果。

解决方案 #

下面提供两种可行的实现方式，推荐第一种来严格匹配space-between的效果：

方式1：通过列比例直接分配项目与间隙

放弃固定的12个1fr列，直接用比例定义项目宽度和间隙，确保两个间隙宽度完全相等（总比例对应12列逻辑：3个项目各占3份，2个间隙各占1.5份，总和为12）：

<div class="grid">
  <div class="grid__item">1</div>
  <div class="grid__item">2</div>
  <div class="grid__item">3</div>
</div>

.grid {
  display: grid;
  /* 项目宽度 + 间隙 + 项目宽度 + 间隙 + 项目宽度 */
  grid-template-columns: 3fr 1.5fr 3fr 1.5fr 3fr;
  width: 100%;
  gap: 0; /* 间隙由列比例分配，无需额外设置gap */
}

.grid__item:nth-child(1) {
  grid-column: 1;
  background: red;
}

.grid__item:nth-child(2) {
  grid-column: 3;
  background: lightblue;
}

.grid__item:nth-child(3) {
  grid-column: 5;
  background: lightgreen;
}

方式2：基于12列网格线的近似实现（不推荐）

如果坚持要使用12列网格线，可通过调整项目的列位置分配间隙，但由于剩余3列无法被2个间隙均分，最终间隙宽度会有差异，无法完全匹配space-between的效果：

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  gap: 0;
}

.grid__item:nth-child(1) {
  grid-column: 1 / span 3;
  background: red;
}

.grid__item:nth-child(2) {
  grid-column: 5 / span 3; /* 第4列作为第一个间隙 */
  background: lightblue;
}

.grid__item:nth-child(3) {
  grid-column: 9 / span 3; /* 第8列作为第二个间隙，第12列留空 */
  background: lightgreen;
}

内容的提问来源于stack exchange，提问作者Taste of Leaving