如何实现含固定尺寸元素、16px固定列间距的CSS响应式列布局

问题根因 #

你为.col设置了width: 33.33%的百分比宽度，列容器会跟随外层.row的宽度自动拉伸，而内部.tile是固定300px宽度，列容器多出的空白区域会形成额外间距，和.tile自带的左右margin叠加后，最终的列间距远大于你设定的16px。

实现方案 #

你可以直接使用flex布局的gap属性控制固定列间距，配合自动换行实现响应式降级，无需手动调整列宽，完全满足元素固定尺寸、列间距固定的要求：

优化后代码 #

body {
  margin: 0;
  padding: 40px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  /* 直接定义列间距为16px */
  gap: 16px;
  /* 可选：屏幕宽度超出3列总宽度时内容居中，避免左侧对齐留白太多 */
  justify-content: center;
}

.tile {
  /* 保持固定尺寸不变 */
  width: 300px;
  height: 300px;
  background-color: #ddd;
}

<!-- 可直接移除冗余的.col容器，结构更简洁 -->
<div class="row">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

如果需要保留原有.col嵌套结构，仅需删除.col的width: 33.33%属性即可，其余逻辑不变。

响应式适配说明 #

该方案会自动根据屏幕宽度调整列数，无需额外编写列宽相关的媒体查询：

• 屏幕宽度≥932px（3个tile宽度+2个间距：3300px + 216px）时展示3列
• 屏幕宽度≥616px（2300px + 116px）且<932px时自动折行为2列
• 屏幕宽度<616px时自动折行为1列

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