CSS Grid布局元素间距问题：justify-content: space-between不生效

首先明确核心原因：justify-content: space-between 只有在网格轨道（列）的总宽度小于grid容器的水平宽度时才会生效。如果列轨道总宽度等于或超过容器宽度，这个属性就没有发挥空间——而你用align-content: space-between生效，说明容器垂直高度大于行轨道总高度，有剩余空间供分布。

根据你的需求，提供两种解决方案：

方案一：让justify-content生效（实现轨道两端对齐，中间自动分配间距） #

需要确保grid容器有足够的水平剩余空间，调整方式如下：

1. 给容器设置大于列总宽度的水平尺寸，比如width: 100%（前提是父容器宽度足够）或固定宽度；
2. 避免用1fr这类让列平分容器宽度的设置（这种情况下轨道总宽度等于容器宽度，justify-content无作用），改用固定列宽。

示例代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 180px); /* 固定列宽，总宽度540px */
  justify-content: space-between; /* 容器宽度大于540px时，列轨道会两端对齐，中间自动分配间距 */
  align-content: space-between;
  width: 100%; /* 或固定为800px这类大于列总宽度的值 */
  height: 600px;
  border: 1px solid #ccc;
}

.grid-item {
  background: #f0f0f0;
  padding: 20px;
}

方案二：直接设置元素固定间距（更简单的通用方案） #

如果你只是想让网格项之间产生固定的水平/垂直间距，不需要依赖容器剩余空间，推荐使用gap属性（替代旧版grid-gap）——这是Grid布局专门用来设置元素间距的属性，比justify-content更直接可控。

示例代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 列可平分容器宽度 */
  gap: 30px; /* 同时设置水平和垂直间距为30px，也可分开写row-gap、column-gap单独控制 */
  align-content: space-between; /* 保留垂直方向的轨道分布效果 */
  height: 600px;
}

.grid-item {
  background: #f0f0f0;
  padding: 20px;
}

额外提醒：如果你的容器是display: inline-grid，它的宽度由内容决定，justify-content也不会生效，需要改成display: grid并设置合适的宽度。

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