Flex实现等高列最简单可靠：父容器设display: flex，子元素默认拉伸等高；Grid适合多行多列真正等高；避免float/table-cell；等高不等于内容底部对齐。
Flex 实现等高列最简单可靠
只要父容器设为 display: flex，所有直接子元素默认拉伸到同一高度，无需额外设置 height 或 min-height。这是目前兼容性好、代码量少、行为可预测的首选方案。
常见错误是忘记清除子元素的默认 margin 或设置了 flex: none / flex-shrink: 0 导致高度被内容撑开不一致；另外，若子元素内部用了 height: 100% 却没给父级设显式高度，可能失效。
实操建议：
- 父容器加
display: flex，子项无需额外样式即可等高 - 用
flex-direction: column时，等高效果不生效——此时应改用grid或调整布局逻辑 - 需要换行多行等高列？加
flex-wrap: wrap，但注意：每行内等高，行与行之间不等高；真要全网格等高，得切到grid - IE11 对
flex的align-items和自动拉伸支持不稳定，如需兼容，避免依赖align-items: stretch的隐式行为，可显式写align-items: stretch
Grid 实现多行多列真正等高网格
当需要两维对齐（比如 3×3 卡片列表，每行每列都严格等高），display: grid 是唯一自然支持的方案。它不依赖内容流，而是靠轨道定义高度。
立即学习“前端免费学习笔记（深入）”；
典型误用是只设了 grid-template-columns 却没管 grid-template-rows，导致每行高度由内容决定，列依然不等高。
实操建议：
- 用
grid-template-rows: 1fr让所有行高相等；或用grid-auto-rows: 1fr让新增行也自动等高 - 避免在子项上写
height: 100%——Grid 子项默认已填满单元格，再设 height 可能触发双重计算或溢出 - 若列数固定但行数不定，推荐
grid-template-columns: repeat(3, 1fr)+grid-auto-rows: minmax(min-content, 1fr)，兼顾内容适配与等高 - Firefox 和 Chrome 对
1fr在嵌套 Grid 中的解析更一致；Safari 旧版（≤15.4）对grid-auto-rows的1fr支持有 bug，可用minmax(0, 1fr)替代
为什么不要用 float 或 table-cell 模拟等高
float 布局无法让不同列内容高度自动对齐，必须靠 JS 监听或 hack（如 padding-bottom + margin-bottom 抵消），维护成本高且响应式下极易错位；display: table-cell 虽能等高，但丧失弹性、无法换行、vertical-align 行为反直觉，且在 Flex/Grid 普及后已无必要。
这两个方案现在只出现在老项目维护或特定 iframe 嵌套场景中，新项目遇到“必须兼容 IE9”之类极端需求才考虑，否则纯属自找麻烦。
等高 ≠ 内容底部对齐，别混淆这两个需求
Flex/Grid 的等高是指容器高度一致，但子元素内部文字、图片等默认仍按顶部对齐。如果需要“所有卡片底部按钮对齐”，光等高不够，还得在子项里加一层 display: flex; flex-direction: column，再对底部区域用 margin-top: auto 或 align-self: flex-end。
这个细节最容易被忽略：看着列一样高，点进去才发现按钮高低不一。调试时建议先用背景色标出子项边界，确认是容器等高了，再处理内部对齐。
