无需display: table-row实现等高3列3行列表布局求助

哈哈，这个问题太常见了！不用display: table-row，还得保持所有列高度一致，又不能在元素中间插行标签，咱们用现代CSS布局就能轻松解决，完全不用再折腾float那套老办法了。

方法1：CSS Grid（最推荐，代码简洁又可靠） #

CSS Grid天生就是为这种行列布局设计的，直接给父元素<ul>设置网格属性，所有<li>会自动填充到网格里，而且同一行的所有列高度会自动和最高的那个保持一致，完全不用管内容多少。

给你对应的CSS代码：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 定义3列，每列宽度均分；也可以换成固定宽度比如200px */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 可选：设置列与列、行与行之间的间距 */
  gap: 1rem;
}

li {
  /* 这里可以加你需要的样式，比如边框、内边距 */
  border: 1px solid #eee;
  padding: 1.2rem;
  background: #f9f9f9;
}

原理很简单：grid-template-columns: repeat(3, 1fr)让容器分成3个等宽列，gap控制间距，当<li>数量超过3个时，会自动换行到下一行，而且每一行的所有单元格高度都会统一，完美解决你用float时高度不一致的问题。

方法2：Flexbox（兼容旧浏览器可选） #

如果需要兼容一些比较老的浏览器（比如IE11），Flexbox也是个不错的选择，虽然代码比Grid稍复杂一点，但同样能实现需求：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  /* 让元素换行，不然所有li会挤在一行 */
  flex-wrap: wrap;
  /* 列间距 */
  gap: 1rem;
}

li {
  /* 计算每列宽度：1/3宽度减去gap的分摊值，确保总宽度不溢出 */
  width: calc(33.333% - 0.666rem);
  /* 让li自动拉伸高度，匹配同行最高元素 */
  flex-grow: 1;
  border: 1px solid #eee;
  padding: 1.2rem;
  background: #f9f9f9;
  /* 确保内边距和边框不会撑宽元素 */
  box-sizing: border-box;
}

这里flex-wrap: wrap是关键，让元素在一行放不下时自动换行；flex-grow: 1配合默认的align-items: stretch，会让每个<li>的高度自动拉伸到同行最高的那个。

为什么float不行？ #

之前用float时高度不一致，是因为float元素的高度完全由自身内容决定，没有内置的“同行元素等高”机制，虽然可以用一些伪元素清除浮动加overflow: hidden的hack，但这种方法不仅麻烦，还容易引发其他布局问题，远不如现代CSS布局稳定。

这两种方案都不需要修改你的HTML结构，直接加CSS就能实现3列3行、所有列高度相同的效果，完全符合你的需求！

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