CSS 如何实现等高列布局？

Question

CSS 如何实现等高列布局？

仓乃文 · Accepted Answer

等高列布局让同一行中不同内容量的列保持相同高度，Flexbox 和 Grid 默认支持等高，无需额外设置。

```css
.equal-height-flex {
  display: flex;
  gap: 16px;
}

.equal-height-flex .col {
  flex: 1;
  background: #f5f5f5;
  padding: 20px;
}
```

Grid 方案：
```css
.equal-height-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.equal-height-grid .col {
  background: #f5f5f5;
  padding: 20px;
}
```

传统方案（无需 Flex/Grid）：
```css
.equal-height-table {
  display: table;
  width: 100%;
}

.equal-height-table .col {
  display: table-cell;
  background: #f5f5f5;
  padding: 20px;
}
```

补充说明：
- Flexbox 默认 align-items: stretch，子元素自动等高
- Grid 默认子元素自动填充网格高度
- display: table-cell 方案兼容 IE8+，但不够灵活
- 等高列适合卡片列表、产品对比、价格表等场景