CSS实现动态子元素多行布局且同列宽度一致的方案咨询

你的需求可以通过CSS Grid布局完美实现，无需预定义列数、无需为子元素单独设置类名，也不需要手动拆分多行结构，实现代码如下：

.wpr {
  width: 100%;
  display: grid;
  /* 核心配置：自动填充列，每列宽度适配该列最大内容宽度 */
  grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
  /* 可按需调整行列间距 */
  gap: 0;
}

.wpr div {
  border: 1px solid red;
  text-align: center;
  /* 保证内容单行不折行 */
  white-space: nowrap;
  /* 以下两个属性为可选配置：内容超出列宽时显示省略号，不需要可删除 */
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="wpr">
  <div>First link</div>
  <div>Second link</div>
  <div>Third link</div>
  <div>Fourth longer --- link</div>
  <div>Fifth link</div>
  <div>Sixth link</div>
  <div>Seventh link</div>
</div>

需求匹配说明 #

• 所有子元素内容单行展示：通过white-space: nowrap实现，完全符合要求。
• 超出自动换行、窗口缩放自动重排：auto-fill参数会根据父元素实时宽度自动计算单行可容纳的列数，超出数量的子元素自动换行，父元素宽度为100%时可完美适配窗口缩放场景。
• 同列宽度一致、类似table效果：minmax(min-content, 1fr)会自动将每列宽度设置为该列所有子元素的最大内容宽度，保证同列所有元素宽度完全相等。
• 最后一行允许空列：auto-fill特性默认支持最后一行剩余位置留空，无需额外处理。

如果需要适配IE11及更早版本，可选择CSS多列布局作为替代方案，同样不需要使用浮动实现。

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