Grid子元素高度不一致本质是容器未设明确高度或未用grid-template-rows强约束行高；应优先显式定义grid-template-rows（如repeat(3,1fr)或minmax(200px,1fr)）并确保容器有height/min-height。
grid-template-rows: 用 minmax() 或 1fr 强制等高
子元素高度不一致，本质是 Grid 容器没给行高“强约束”。默认情况下，grid-auto-rows 是 auto，每行按内容撑开，自然参差不齐。
解决办法是显式定义行高策略：
- 若所有行需严格等高（如卡片网格），用
grid-template-rows: repeat(3, 1fr)—— 此时所有行平分可用高度 - 若需最小高度保障 + 内容可撑高，用
grid-template-rows: repeat(3, minmax(200px, 1fr))—— 每行至少 200px，有剩余空间再均分 - 注意：
1fr在grid-template-rows中生效的前提是容器有明确高度（如height: 600px或min-height），否则仍退化为auto
align-items 和 align-content 的区别必须分清
align-items 控制的是**单个网格项在其所在单元格内的交叉轴对齐方式**，不影响单元格自身高度；而 align-content 控制的是**多行网格轨道在容器交叉轴上的整体分布方式**，只在有多行且容器有剩余空间时才起作用。
常见误操作：
- 设了
align-items: stretch却发现没效果 → 因为父容器没设高度，子项无法“拉伸”到未定义的行高 - 想让所有行等高却去调
align-content: stretch→ 这个属性对单行无效，且不会改变行高计算逻辑 - 真正起统一高度作用的是
grid-template-rows或grid-auto-rows，不是对齐属性
子元素内部内容溢出导致视觉不齐？用 overflow + min-height 配合
即使 Grid 行高统一，子元素内文字、图片、按钮等若未限制尺寸，仍会撑破容器边界，造成视觉错位。这不是 Grid 的问题，而是内容失控。
建议组合处理：
- 给子元素设
min-height: 0（尤其当它本身是 flex 容器时，防止 flex item 默认最小高度干扰） - 文字区域加
overflow: hidden和display: -webkit-box实现多行截断 - 图片用
object-fit: cover+ 固定宽高，避免拉伸变形或撑高
.card {
display: flex;
flex-direction: column;
min-height: 0; /* 关键：允许 flex 子项收缩 */
}
.card img {
width: 100%;
height: 120px;
object-fit: cover;
}
.card .title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}JavaScript 动态补救：仅当 CSS 不可控时才考虑
极少数场景（如 CMS 输出不可改 HTML 结构、第三方组件嵌入），CSS 无法统一行高，才用 JS 扫描并设高度。但这是下策，性能差且响应式易失效。
如果真要用，注意：
- 不要用
offsetHeight，它触发重排；优先用getBoundingClientRect().height - 必须监听窗口 resize，并用
ResizeObserver监听子元素内容变化 - 批量读取所有子项高度后取最大值，再统一赋给同组行的所有子项
style.height
grid-template-rows 或容器高度缺失——90% 的“不一致”其实都卡在这两个地方。 
