如何强制列换行显示？实现每行3列且等高布局

嗨，这个问题我太熟了——用display: table/table-cell实现等高确实好用，但要强制每行3列换行可就踩坑了，因为table的单元格是依附于行结构的，没法自动拆分换行，后续列数增加还得手动调整行容器，非常麻烦。给你两个更适合的现代CSS方案，完美解决动态列数+每行3列+等高的需求：

方案一：Flexbox布局（兼容性好，灵活度高） #

Flexbox是目前实现这类布局的首选，既能自动换行，又能默认保持子项等高，代码也简洁：

/* 替换原来的.table类 */
.flex-container {
  display: flex;
  flex-wrap: wrap; /* 关键：超出容器宽度自动换行 */
  gap: 30px; /* 替代原来的border-spacing，控制列之间的水平间距 */
  width: 100%;
}

/* 替换原来的li样式 */
.flex-container li {
  flex: 1 0 calc((100% - 60px) / 3); /* 计算每列宽度：容器总宽 - 2个间距（3列有2个间隙），再平分3份 */
  /* 注：flex属性里的1表示允许拉伸填充剩余空间，0表示不允许缩小，确保每列宽度稳定 */
  /* 不需要额外设置display: table-cell，Flex默认align-items: stretch，自动让所有子项等高 */
  box-sizing: border-box; /* 避免内边距/边框撑宽列 */
}

对应的HTML结构也可以简化，不需要原来的.row容器，直接把所有li放到.flex-container里就行：

<div class="flex-container">
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
  <li>内容4</li>
  <!-- 后续新增的li会自动换行到下一行，保持每行3列 -->
</div>

方案二：Grid布局（更直观，适合固定列数场景） #

Grid布局是专门为二维布局设计的，实现固定每行3列的需求更直观，同样默认保持子项等高：

/* 替换原来的.table类 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 关键：直接指定每行3列，每列平分容器宽度 */
  gap: 30px; /* 控制列、行之间的间距，和border-spacing效果一致 */
  width: 100%;
}

/* 替换原来的li样式 */
.grid-container li {
  box-sizing: border-box;
  /* Grid默认子项高度会匹配同一行中最高的元素，自动实现等高 */
}

HTML结构和Flex方案一样，不需要.row容器，新增li会自动填充到下一行。

为什么不推荐继续用Table布局？ #

如果硬要坚持用table/table-cell，你只能手动把每3个li放到一个.row里，但后续列数增加时，要么手动修改HTML结构，要么写JS动态拆分元素，不仅麻烦，还不利于维护。现代CSS布局方案（Flex/Grid）已经完全能替代这种场景，而且更灵活。

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