CSS Grid响应式布局列间出现额外间隙问题求助

你遇到的列间额外空白，根源是justify-items: center属性——它会让网格项在各自的单元格内水平居中，但网格单元格的宽度由grid-template-columns计算得出，当单元格宽度大于网格项本身宽度时，单元格左右的剩余空间就会呈现为空白，在窗口缩小的临界点时尤为明显。

解决方案一：调整布局逻辑，让网格项填满单元格，同时内部内容居中 #

修改后的CSS代码：

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(25rem, 1fr));
  /* 移除justify-items: center，让网格项自动填满单元格宽度 */
  text-align: center;
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
}

.services-container div {
  background-color: #D00000;
  height: 20rem;
  /* 通过flex布局让内部内容垂直+水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem; /* 可选，避免内容贴边 */
}

解决方案二：保留justify-items:center，强制网格项填满单元格 #

修改后的CSS代码：

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(25rem, 1fr));
  justify-items: center;
  text-align: center;
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
}

.services-container div {
  background-color: #D00000;
  height: 20rem;
  width: 100%; /* 强制网格项填满所在单元格的宽度 */
}

两种方案都能消除列间的额外空白，同时保持内容居中的视觉效果，完美适配不同窗口尺寸的响应式布局。

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