Flexbox和Grid均能天然实现多列等高，关键在于保留align-items: stretch默认行为；父容器需有明确高度参照，子项不可设height、max-height或align-self:flex-start，否则拉伸失效。
Flexbox 和 Grid 都能天然实现多列等高，关键不是“怎么加代码”，而是别关掉它们默认的拉伸行为。
为什么加了 display: flex 还是不等高？
最常见原因是父容器没“可拉伸的空间参照”——align-items: stretch 默认生效，但它只在交叉轴（垂直方向）有尺寸约束时才真正起作用。
- 父容器写了
height: 300px？没问题，子项会拉满这个高度 - 父容器是
height: auto且内容很短？那它本身高度塌缩，子项再拉伸也没视觉效果 - 子项写了
height: 100%或max-height: 200px？直接覆盖 stretch，等高失效 - 某个子项加了
align-self: flex-start？它自己退出等高队列
解决办法很简单：删掉所有干扰项，确保父容器有明确高度（比如 min-height: 100vh），子项不设 height/max-height，也不写 align-self。
grid-template-rows: 1fr 为什么没让所有列一样高？
1fr 是分配剩余空间，不是强制对齐高度。它只有和 align-items: stretch（默认值）配合，并且容器有明确行轨道高度时，才能让子项“看起来等高”。
- 如果只写了
grid-template-columns: 1fr 1fr，没写grid-template-rows，Grid 会按内容生成行，每行内子项仍等高 - 如果写了
grid-template-rows: 1fr，但父容器高度未定义（如height: auto），那这1fr实际算不出具体像素，拉伸就不可见 - 子项内部有
img或video？它们默认min-height: auto会阻止拉伸，加min-height: 0即可释放
更稳妥的做法是：用 grid-auto-rows: minmax(0, max-content) 替代硬写 1fr，避免因内容溢出导致布局断裂。
子项里有绝对定位或浮动元素，还等高吗？
绝对定位（position: absolute）和浮动（float）本身不影响外层 Flex/Grid 的等高逻辑，因为 stretch 只看子项的盒模型边界，不关心内部是否脱离文档流。
- 但若子项内部用了
position: absolute去“撑高”自身（比如 bottom: 0 + top: 0），那它实际高度可能为 0，导致外层拉伸后空白一大片 - 浮动元素若没清除，可能造成子项
height计算错误（尤其旧版 Safari），建议统一用display: flow-root或overflow: hidden清除 - 子项用了
display: table-cell？它会无视外层 Flex 的 stretch，必须统一改掉
真正容易被忽略的是：子项的 box-sizing 不一致（比如有的 border-box，有的 content-box），padding/border 计算方式不同，会让视觉高度差几像素——这不是不等高，是渲染误差。
要不要用 JS 手动同步高度？
绝大多数情况不用。现代浏览器中，Flex 和 Grid 的 stretch 行为已足够稳定，JS 同步属于过早优化，且极易出错：
- 异步加载内容后忘记重算
- Vue/React 组件更新时机难捕捉，
ResizeObserver也得小心嵌套触发 - 滚动时频繁计算拖慢性能，尤其列表长、子项多
唯一值得考虑 JS 的场景：需要“所有列严格等于最高列的高度”，且不允许任何一列继续撑高（即禁用内容自适应）。这种需求本身反模式，优先应通过设计降级（比如卡片底部固定按钮区+文字省略）来规避。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
