Grid布局中行高不一致主因是内容高度差异、默认对齐及grid-auto-rows设置不当；grid-auto-rows仅作用于隐式行，显式行需用grid-template-rows统一；align-content控制多行整体分布而非单行高度，配合align-items:center和minmax()可实现视觉等高。
Grid 布局中行高不一致，通常是因为内容高度不同、默认对齐方式或 grid-auto-rows 设置不当导致的。用 grid-auto-rows 配合 align-content 确实能有效统一行高，但关键在理解二者作用范围和配合逻辑。
明确 grid-auto-rows 控制的是“自动创建的行”的尺寸
grid-auto-rows 只对**隐式网格行**（即超出显式定义的 grid-template-rows 的那些行）生效。如果你用的是 grid-template-rows: 100px 200px; 显式定义了两行，后续新增的项会进入隐式行——这时 grid-auto-rows: 1fr 或 80px 才起作用。
- 想让所有行（包括显式行）高度一致？优先用
grid-template-rows: repeat(auto-fit, minmax(80px, 1fr))这类响应式定义，而非依赖auto-rows - 若必须混合使用，记得：显式行高度由
grid-template-rows决定，隐式行才听grid-auto-rows - 避免写成
grid-auto-rows: 1fr却没设grid-template-rows: none——1fr在隐式行中无法解析，会退为auto
align-content 影响的是多行之间的整体分布，不是单个单元格对齐
align-content 作用于整个网格容器的**行轨道之间**，只有当网格容器有**剩余空间**且存在**多行**（隐式或显式）时才生效。它不会改变每行自身高度，而是决定这些行整体在容器内如何排列（比如顶部堆叠、居中、均匀拉伸）。
- 容器高度固定（如
height: 400px），且总行高小于该值 →align-content: stretch会让各行等比例撑满空隙 - 想让所有行严格等高且填满容器？用
grid-template-rows: repeat(3, 1fr)（显式三行）+align-content: stretch（虽冗余但无害） -
align-content: start是默认值，行会顶部对齐、不拉伸；设为center或space-between仅调整行组位置，不修正单行内容溢出
真正统一视觉行高的关键是单元格内容对齐 + 行轨道控制
即使行轨道高度一致，文字多的格子仍可能“撑高”整行（因 align-items: stretch 默认拉伸）。此时需协同设置：
立即学习“前端免费学习笔记（深入）”；
- 给网格容器加
align-items: center或flex-start，防止子项纵向拉伸行高 - 给网格项加
overflow: hidden和text-overflow: ellipsis，配合display: -webkit-box多行截断，限制内容高度 - 用
min-height+max-height组合强制单元格最小/最大高度，再配合align-self: center居中内容
一个稳妥的等高行模板
适用于动态内容、未知数量的卡片/列表项：
.grid {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(96px, 1fr));
grid-auto-rows: 96px; /* 隐式行兜底 */
align-content: stretch; /* 多行时均匀填充 */
align-items: center; /* 单元格内容不拉伸行 */
}
.grid > * {
min-height: 96px;
display: flex;
align-items: center;
padding: 0 12px;
} 
