Flexbox通过设置display: flex使子元素自动等高，结合flex: 1实现等宽；2. Grid通过display: grid和grid-template-columns定义列，行高由最高列决定；3. 简单布局选Flexbox，复杂二维布局选Grid，两者均无需JavaScript且兼容性良好。
实现等高列布局是前端开发中的常见需求，尤其在多栏内容不一致时，视觉上的对齐尤为重要。现代CSS提供了两种高效方式：弹性盒子（Flexbox）和网格布局（Grid）。它们都能轻松实现等高列，无需依赖JavaScript或固定高度。
使用弹性盒子（Flexbox）实现等高列
Flexbox 的默认行为会让同一行的子元素具有相同的高度，前提是它们的父容器设置了 display: flex。这个特性非常适合等高列布局。
基本实现方法如下：
- 将容器设置为 display: flex
- 子列直接作为 flex 项目，自动拉伸至相同高度
- 可结合 flex: 1 实现等宽或按比例分配空间
.container {
display: flex;
}
<p>.column {
flex: 1; /<em> 等宽分布 </em>/
padding: 20px;
background: #f0f0f0;
margin: 5px;
}
即使某一列内容较少，其他列内容较多，所有列的高度都会跟随最高的一列自动调整，实现视觉上的等高效果。
立即学习“前端免费学习笔记（深入）”；
使用网格布局（Grid）实现等高列
CSS Grid 提供了更灵活的二维布局能力，同样能自然实现等高列。通过定义列轨道，Grid 容器内的行会自动统一高度。
关键点在于：
- 父容器设置 display: grid
- 使用 grid-template-columns 定义列宽
- 行高由内容最多的一列决定，其余列自动对齐
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三等分 */
gap: 10px;
}
<p>.column {
padding: 20px;
background: #e0e0e0;
}
Grid 布局更适合复杂布局场景，比如需要对齐行和列，或定义区域模板时。
选择 Flex 还是 Grid？
如果只是简单的横向多列布局，Flexbox 更轻量、兼容性更好。若需要精确控制行列结构，或者设计响应式网格区域，Grid 是更强大的选择。
两者都不再依赖浮动或绝对定位，代码更清晰，维护更方便。现代浏览器对这两种布局的支持已经非常完善。
基本上就这些。根据项目需求选择合适的方式，等高列布局其实并不复杂，关键是理解 flex 和 grid 的默认对齐行为。
