使用 grid-auto-rows 和 minmax() 可统一CSS网格行高，避免错位。通过 grid-auto-rows 设置固定行高或结合 minmax() 定义最小高度与自适应扩展，实现内容适配与视觉整齐；再配合 grid-template-rows 可对前几行单独设定，其余行按规则自动生成，提升布局灵活性与一致性。
在使用CSS Grid布局时，如果网格中的行高不统一，导致内容错位或视觉混乱，可以通过 grid-auto-rows 或 minmax() 函数来统一控制行高。这种方式尤其适用于行数动态或内容高度不一致的场景。
使用 grid-auto-rows 固定行高
如果你希望所有自动生成的行具有相同的高度，可以直接设置 grid-auto-rows 为一个固定值。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px; /* 所有行高均为100px */
}
这样每行的高度都会是100px，无论内容多少，避免出现行高参差不齐的问题。
使用 minmax() 设置弹性行高
更灵活的方式是使用 minmax()，它允许你设定行高的最小值和最大值，兼顾统一性和内容适应性。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(80px, auto); /* 最小80px，内容多时自动撑开 */
}
这种写法确保每一行至少有80px高，内容较多时可以自动扩展，既保持了基本统一，又不会溢出或截断内容。
配合 grid-template-rows 精确控制特定行
如果你只想对前几行设置特定高度，其余行统一处理，可以结合 grid-template-rows 和 grid-auto-rows。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 120px 60px; /* 前两行高度固定 */
grid-auto-rows: minmax(80px, auto); /* 后续自动生成的行使用统一规则 */
}
这样能实现部分行特殊处理，其余行保持一致高度，适合复杂布局。
基本上就这些。合理使用 grid-auto-rows 和 minmax()，就能有效解决CSS网格中行高不统一的问题，让布局更整洁可控。
