真正等高布局可用flex或grid实现，关键在于避免height相关属性干扰stretch行为、合理使用flex:1或minmax(0,1fr)，并注意safari兼容性及图片尺寸控制。
直接用 display: flex 或 display: grid 就能实现真正等高，不需要 JS、不用 hack、不靠背景模拟——前提是别乱加限制。
为什么加了 display: flex 还不等高？
因为 align-items: stretch 虽然是默认值，但它会被很多“看似无害”的样式悄悄关掉：
- 子项写了
height、max-height或min-height: 0（尤其旧 Safari 下会破坏拉伸） - 父容器没设高度，且子项用了
height: 100%——但父级实际是auto高度，100%就算不出来 - 子项内部有
flex-direction: column却忘了给它加height: 100%，导致内容撑不开容器 - 用了
flex: none或flex-shrink: 0，让子项拒绝压缩/拉伸
最简可靠写法：
.container { display: flex; }<br>.item { flex: 1; }不写 height，不写 align-self。
grid-template-rows: 1fr 有时反而更糟？
因为 1fr 是按可用空间均分，如果父容器高度不确定（比如由内容撑开），1fr 可能被解析为 0，导致子项塌缩；而省略 grid-template-rows 反而更稳——Grid 默认按最高项自动定行高，并用 align-items: stretch 拉齐。
- 单行多列布局：用
grid-template-columns: repeat(3, 1fr)，不写grid-template-rows - 多行网格需每行都等高：才用
grid-auto-rows: 1fr；Safari ≤15.4 有 bug，可改用minmax(0, 1fr) - 子项里再嵌 flex 做垂直居中？没问题，但别在子项上写
height: 100%——Grid 子项默认已填满单元格 - 需要兼容旧 Safari？给子项加
min-height: 0防 collapse
响应式切换时等高容易断掉
小屏堆叠后还留着等高痕迹，是因为 items-stretch 在 flex-col 下依然生效（拉伸宽度），但若父容器被撑开或有 min-h，视觉上仍像“等高”。
- 正确做法是显式重置：比如
sm:flex-row items-stretch md:items-start，大屏等高，小屏取消 - 或者更干脆：直接覆盖默认 stretch。Grid 方案更稳：
grid-cols-1 sm:grid-cols-[240px_1fr_240px]，小屏单列，大屏三栏，等高逻辑天然延续 - JIT 模式下方括号内空格要转下划线：
grid-cols-[240px_minmax(0,1fr)_240px]，否则类不生成 - 左右栏内容少、中间栏内容长时，
1fr可能撑破容器造成横向滚动；必须用minmax(0,1fr)替代，否则等高布局会在视觉上“错位”或溢出
最容易被忽略的其实是子项内部的 img：缺 max-width: 100% 或 height: auto，会单点撑高整行，让 stretch 失效——这个细节在调试时往往卡很久。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
