等高列推荐用Flexbox（display: flex + align-items: stretch）或CSS Grid（grid-auto-rows: minmax()），二者无需JS、语义清晰、兼容性好；避免父容器高度auto、子项设height/max-height及margin干扰。
实现响应式布局中的等高列，核心是让列容器内的子项在高度上自动拉伸对齐。现代 CSS 提供了两种简洁可靠的方式：Flexbox 的 align-items: stretch 和 CSS Grid 的 grid-auto-rows（配合 minmax() 或固定值）。它们都无需 JavaScript，语义清晰，兼容性良好（Flexbox 支持到 IE10+，Grid 到 IE11+，主流浏览器完全支持）。
用 Flexbox 实现等高列（推荐用于单行多列）
将父容器设为 display: flex，子项默认就会沿交叉轴（通常是垂直方向）拉伸填满容器高度，前提是父容器有明确高度或受内容/父级约束影响而产生可参照的高度。
- 确保父容器没有设置
align-items: flex-start等覆盖默认值；保持align-items: stretch（Flex 默认值）即可 - 子项不要设置
height、max-height或flex: none，否则会阻止拉伸 - 响应式场景下，可用
flex-wrap: wrap+ 媒体查询控制列数，每行仍保持等高
用 CSS Grid 实现等高列（适合多行、复杂网格）
使用 display: grid 并搭配 grid-template-rows: 1fr（单行）或 grid-auto-rows: minmax(min-content, 1fr)（多行自适应），可让所有行内轨道自动等高。
-
grid-template-rows: 1fr适用于已知行数的布局（如两列并排 → 一行两格），整行高度由最高列决定 -
grid-auto-rows: 1fr更适合动态内容或多行网格，每行独立等高（注意：它作用于“自动创建的行”，需配合grid-template-columns明确列结构） - 若希望最小高度不塌陷，写成
grid-auto-rows: minmax(200px, 1fr)，兼顾内容与视觉一致性
兼容老浏览器的备选思路（慎用）
如果必须支持 IE9 及更早版本，可考虑 display: table-cell（父容器 display: table，子项 display: table-cell），但语义失真、响应式难控制，且无法与 Flex/Grid 混用。不建议新项目采用。
立即学习“前端免费学习笔记（深入）”；
- table-cell 方案在移动端易出现横向滚动，需加
table-layout: fixed和宽度控制 - 媒体查询中切换 display 类型容易引发重排，维护成本高
常见陷阱提醒
等高失效往往不是方法不对，而是被隐式样式干扰：
- 父容器高度为
auto且无内容撑开时，Flex/Grid 的 stretch 行为无参照基准 → 给父容器加min-height: 100vh或依赖内容流 - 子项内有
margin-bottom导致视觉高度不一致 → 改用padding或在子项外层包一层清除边距 - 图片未设置
max-width: 100%或height: auto→ 溢出破坏等高，尤其在小屏下
