Flexbox实现多列等高最稳，align-items: stretch默认拉齐子项高度，但易被align-items: flex-start或height: 100%等设置破坏；Grid需用grid-template-rows: 1fr保障等高；IE11降级用JS取offsetHeight；伪等高存在可访问性问题，新项目应避免。
Flexbox 实现多列等高最稳，align-items: stretch 是默认行为但常被意外覆盖
只要父容器设了 display: flex，子项高度自动拉齐——前提是没手动改过 align-items 或子项自身设了 height/max-height。很多人写完发现不等高，一查是加了 align-items: flex-start（比如为了顶部对齐），或者某个卡片里用了 height: 100% 却没给父级设高度，导致计算失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器只设
display: flex，别碰align-items，让它保持默认的stretch - 子项内部内容用
flex-direction: column+flex: 1撑开内部区块（比如标题、描述、按钮），避免靠min-height硬撑 - 慎用
height: 100%：它依赖父级有明确高度，而 Flex 容器的高度是内容驱动的，容易形成循环依赖
CSS Grid 的 align-items: stretch 同样有效，但要注意显式轨道定义的影响
Grid 布局下，align-items: stretch 默认生效，但如果你写了 grid-template-rows: auto auto 或指定了固定行高（如 1fr 200px），就会压制等高逻辑——因为 Grid 优先按轨道分配空间，而不是按内容拉伸。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 多列等高场景优先用
grid-template-rows: 1fr（单行轨道），让所有列共享同一行轨道，自然等高 - 如果需要多行内容分区（比如标题区、正文区、操作区），用
display: contents或嵌套 Flex，别强行拆成多行 Grid 轨道 - 避免混用
grid-auto-rows和显式grid-template-rows，前者在隐式网格中才起作用，容易误判
JS 补位方案只在必须支持 IE11 时考虑，offsetHeight 比 clientHeight 更可靠
IE11 不支持 Flex 等高（尤其在 flex-wrap: wrap 下表现异常），这时才轮到 JS。但别用 clientHeight，它忽略边框和滚动条；也别在 DOMContentLoaded 就执行，得等图片加载完（用 img.onload 或 IntersectionObserver）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只针对 class 名为
card-grid这类明确语义的容器做 JS 处理，避免全局遍历 - 取最大高度用
Math.max(...items.map(el => el.offsetHeight))，offsetHeight包含 border/padding，更贴近视觉等高 - 绑定
window.resize时加节流，且仅当容器宽度变化超过 10px 再重算，否则频繁触发影响滚动性能
伪等高陷阱：用 padding-bottom + margin-bottom 负值模拟，兼容性好但语义错乱
老项目里常见“伪等高”写法：给每列加巨大 padding-bottom，再用负 margin-bottom 把多余空间藏掉。它能在 IE8+ 工作，但会破坏可访问性（屏幕阅读器读到大量空白）、干扰打印样式、让 getBoundingClientRect() 计算失真。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 新项目绝对不要用；存量项目若要保留，确保外层加
overflow: hidden，否则 padding 会撑破容器 - 如果必须适配低版本浏览器，优先降级为单列流式布局，而不是硬撑“视觉等高”
- 检查是否启用了
box-sizing: border-box，否则padding-bottom会额外增加元素总高度，和负 margin 对不上
等高本身不是目的，而是为了视觉节奏一致。最容易被忽略的是：内容截断（text-overflow: ellipsis）和图片宽高比不一致，会让“等高”变得毫无意义——列看着一样高，但信息密度天差地别。先理清内容结构，再选技术方案。
