如何在非表格的多列布局中固定列宽？

问题本质 #

column-width: 30ex的工作逻辑是：先根据容器宽度计算可容纳的最小列数，再自动拉伸列宽填满容器，这就是为什么你没法得到固定30ex的列。

最优解决方案：CSS Grid 布局 #

无需修改HTML，仅通过CSS Grid就能实现固定30ex列宽、列数随容器宽度自动调整的需求，代码如下：

body {
  margin: 0;
  padding: 0;
}

#my-columns {
  display: grid;
  /* 自动生成列，每列严格固定30ex，容器宽度不够时自动换行 */
  grid-template-columns: repeat(auto-fit, 30ex);
  /* 列间距与原布局保持一致 */
  gap: 1em;
  /* 可选：控制剩余空间的位置，start是靠左，center是居中 */
  justify-content: start;
  text-align: justify;
}

核心逻辑说明 #

• repeat(auto-fit, 30ex)：auto-fit会自动计算容器能容纳多少个30ex宽的列，多余空间不会分配给已有的列，直接留白（可通过justify-content调整留白位置）。
• gap: 1em：替代原column-gap，控制列之间的间距，效果完全一致。

兼容性备选方案（旧浏览器适配） #

如果需要兼容不支持CSS Grid的旧浏览器，可以通过动态计算列数实现，但灵活性稍差：

body {
  margin: 0;
  padding: 0;
}

#my-columns {
  --col-width: 30ex;
  --col-gap: 1em;
  /* 动态计算最大可容纳列数，避免列被拉伸 */
  column-count: calc((100vw) / (var(--col-width) + var(--col-gap)));
  column-width: var(--col-width);
  column-gap: var(--col-gap);
  text-align: justify;
}

注意：如果容器不是全屏宽度，需要把100vw替换成容器的实际宽度值。

内容的提问来源于stack exchange，提问作者Maëlan