使用grid和flex布局时如何解决子元素内容间距不等的问题

问题原因 #

你当前遇到的相邻标题间距不一致问题，根源是4个等宽列的内容对齐基准不同：第一列内容贴左边缘、中间两列内容在列的水平中线位置、最后一列内容贴右边缘，相邻列内容之间的空白区域计算逻辑不一样，自然会出现间距不均的情况。

解决方案 #

这里提供最简单的修改方案，仅调整CSS属性就能同时满足对齐要求和间距一致的需求：

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
}

h6 {
  background: red;
  /* 让标题宽度自适应内容，后续通过边距控制对齐 */
  width: fit-content;
  /* 默认所有标题居中，左右边距自动均分空白 */
  margin: 0 auto;
}

.pre-el {
  background: gray;
  width: 100%;
}

/* 第一列标题靠左，仅保留右侧自动边距填充空白 */
.pre-el:first-child h6 {
  margin-left: 0;
  margin-right: auto;
}

/* 最后一列标题靠右，仅保留左侧自动边距填充空白 */
.pre-el:last-child h6 {
  margin-left: auto;
  margin-right: 0;
}

修改后所有相邻标题之间的空白区域计算逻辑完全统一，不会再出现间距不一致的问题。

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