Grid子元素默认等高，因align-items: stretch使子项拉伸至行高；避免align-self: start、固定height或IE11兼容问题即可保持等高。
Grid容器里子元素高度不一致，怎么让它们自动等高？
Grid默认就等高，不需要额外写代码——前提是别用 align-items: start 或显式设置子项 height 覆盖默认行为。
- Grid容器默认
align-items: stretch，子项会拉伸填满行高（即该行最高子项的高度） - 如果某列内容少但视觉上“看起来没等高”，大概率是子项内边距、字体行高或
margin导致的视觉误差，不是实际高度不等 - 检查是否误加了
align-self: start到某个子项，它会覆盖容器级的align-items - 避免给子项设固定
height或max-height，否则拉伸失效
用 grid-template-columns 布多列时，等高还成立吗？
成立。列数定义不影响等高逻辑，只要子项属于同一行（即未被 grid-row 拆开），它们就在同一行盒子里，align-items: stretch 就生效。
-
grid-template-columns: repeat(3, 1fr)+ 默认grid-auto-rows: auto→ 每行子项仍等高 - 若某子项跨行（如
grid-row: 1 / 3），它只和它所跨越的那些行中“同列”其他项对齐，不是全局等高 - 真正影响等高的不是列定义，而是子项的
grid-row和grid-column范围是否落在同一行轨道内
Flexbox里得靠 align-items: stretch，Grid里为什么更稳？
因为 Grid 的行高由轨道（grid-row）决定，而 Flex 的主轴方向（flex-direction: row）下，交叉轴拉伸依赖所有子项共用同一交叉轴尺寸——一旦某个子项设了 min-height 或内部块有 margin-bottom，就容易破坏对齐。
- Grid 中每行轨道高度是独立计算的，且拉伸发生在轨道层面，不依赖子项自身尺寸推导
- Flex 下如果父容器
height未设，align-items: stretch实际无效（子项按内容高渲染） - Grid 不需要父容器有明确高度也能等高；Flex 在无高度约束时，等高基本不可控
IE11兼容时用 display: -ms-grid 还能等高吗？
不能完全保证。IE11 的 -ms-grid 不支持 align-items，也不支持 stretch 行为，子项默认顶对齐，且无法通过属性拉伸。
立即学习“前端免费学习笔记（深入）”；
- IE11 中必须手动给每个子项设
-ms-grid-row-align: stretch（仅对单个子项有效） - 但即使设了，若子项内有
display: block内容且未清浮动，仍可能塌陷导致视觉不等高 - 更现实的做法是：IE11 下改用 JS 计算最大高度并赋值，或直接放弃等高，用背景色/边框模拟视觉一致性
