Flexbox等高列需align-items: stretch（默认值），父容器须有明确高度，子项禁设height/max-height；Grid等高更天然，依赖grid-template-rows: 1fr或align-items: stretch，默认生效。
flexbox 实现等高列时，align-items 必须设为 stretch
默认情况下，display: flex 容器的 align-items 值就是 stretch，所以子项会自动拉伸至容器高度。但一旦显式设置了 align-items: flex-start 或 center，等高效果就立刻失效。
常见错误是给父容器加了 align-items: center（想垂直居中内容），结果发现列高度不一致了——这时要么改用 margin: auto 居中子内容，要么把居中逻辑下移到子项内部。
-
flex容器需有明确高度（如min-height: 300px）或由内容撑开；若父容器高度为auto且子项无高度约束，stretch仍有效，但视觉上可能看不出“等高”，因为所有列都随最高列自然拉伸 - 子项不能设置
height或max-height（除非有意限制），否则会覆盖stretch行为 - IE10–11 对
align-items: stretch支持不完整，若需兼容，建议加flex: 1到子项
grid 实现等高列，关键在 grid-template-rows 和 align-items
Grid 的等高更“天然”：只要列属于同一行轨道（即未用 grid-row 跨行），它们默认共享该行高度。但前提是行高不能设为 auto（否则各行按各自内容定高）。
最稳妥的方式是让行高由内容最长的列决定，即使用 grid-template-rows: 1fr 或留空（由 align-items: stretch 控制）。
立即学习“前端免费学习笔记（深入）”；
- 若使用
grid-template-rows: auto，各列高度将独立计算，失去等高 -
align-items: stretch是 grid 容器默认值，无需显式写，但若被重置（如全局 CSS 重置了该属性），需手动恢复 - 响应式场景下，
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))搭配align-items: stretch可实现流式等高卡片布局
flex 与 grid 在等高布局中的实际差异
Flex 更适合一维（单行或单列）等高，比如导航栏、卡片组、表单行；Grid 更适合二维网格结构，比如图文混排、仪表盘、响应式相册。
- Flex 子项顺序可灵活用
order调整，Grid 需靠grid-area或grid-column控制位置，语义性更强 - Flex 下，若某列含
margin-bottom: auto，会破坏等高；Grid 中类似操作影响较小，但justify-self/align-self设为start会导致内容上对齐，列本身仍等高 - 性能上无显著差异，但 Grid 在复杂嵌套布局中更易维护，Flex 在简单线性布局中更轻量
遇到等高失效，先检查这三处
90% 的“等高不生效”问题出在以下三个地方，而不是布局模型本身选错。
- 父容器没有形成 BFC 或高度塌陷（如父元素只有浮动子项且未清除），导致 flex/grid 容器实际高度为
0—— 加overflow: hidden或display: flow-root可验证 - 子项设置了
vertical-align（对 inline 元素有效，但对 flex/grid 子项完全无效，却常被误加） - CSS 优先级冲突：比如某框架重置了
* { align-items: flex-start }，覆盖了 flex 容器的默认stretch
.container {
display: flex;
/* 确保没被其他规则覆盖 */
align-items: stretch;
min-height: 200px;
}
.item {
flex: 1;
/* 不要写 height: 100% 或 max-height */
}等高不是靠 JS 计算或 hack 技巧维持的，而是布局模型本身的自然行为。只要容器高度可确定、子项未主动限制高度、对齐属性未被意外覆盖，flex 或 grid 都能可靠工作。最容易被忽略的是父容器高度是否真正存在——它常常藏在某个未察觉的 margin collapse 或 float 里。
