使用CSS Grid可通过grid-template-rows、gap和fr单位实现多行均分布局。首先设置display: grid，通过repeat(n, 1fr)使各行均分容器高度，需指定容器height以确保fr计算有效；可用固定值如100px或混合单位如100px 1fr 2fr实现不同行高分配。利用row-gap或gap属性精确控制行间距，避免margin带来的布局干扰，gap不影响外边距仅作用于网格项间。结合align-items控制整体垂直对齐，align-self调整个别项目对齐方式。为适应内容变化，推荐使用minmax()定义最小行高同时允许弹性扩展，如minmax(80px, 1fr)，从而在固定与灵活之间取得平衡，实现响应式且视觉均衡的网格布局。
要实现多行均分布局并精确控制网格行高与间距，CSS Grid 提供了灵活且强大的布局能力。关键在于合理使用 grid-template-rows、gap 和 fr 单位，结合容器尺寸设置，达到视觉均衡的效果。
定义均匀的网格行高
通过 grid-template-rows 可以明确指定每一行的高度。若希望所有行高度相等，可使用 fr 单位或固定值。
若需要固定行高：
grid-template-rows: repeat(3, 100px);也可以混合使用不同单位：
立即学习“前端免费学习笔记（深入）”；
grid-template-rows: 100px 1fr 2fr; /* 第一行固定，后两行按比例分配剩余空间 */控制行间距（垂直间隙）
使用 row-gap 或简写的 gap 属性来设置行之间的间距，避免依赖 margin 带来的计算复杂性。
如果同时需要列间距：
gap: 10px 20px; /* 行间距 10px，列间距 20px */
注意：gap 不会影响网格容器的外边距，只作用于网格项之间的内部间隙。
确保内容垂直对齐与空间利用
当行高固定或受限时，可能需要控制网格项在行内的对齐方式。使用 align-items 或 align-self 调整垂直对齐。
.special-item { align-self: start; / 个别元素靠上对齐 / }
若内容动态变化，建议结合 minmax() 确保最小高度：
这样每行至少 80px 高，空间充足时仍可扩展。
基本上就这些。通过合理设置行高单位、使用 gap 控制间距，并配合对齐属性，就能轻松实现美观且响应式的多行均分布局。不复杂但容易忽略细节。
