使用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 单位或固定值。
.container { display: grid; grid-template-rows: repeat(3, 1fr); /* 三行，每行均分可用空间 */ height: 300px; /* 必须设定容器高度，否则 1fr 行为不可预测 */ }
若需要固定行高：
grid-template-rows: repeat(3, 100px);
也可以混合使用不同单位：
立即学习“前端免费学习笔记（深入）”；
grid-template-rows: 100px 1fr 2fr; /* 第一行固定，后两行按比例分配剩余空间 */
控制行间距（垂直间隙）
使用 row-gap 或简写的 gap 属性来设置行之间的间距，避免依赖 margin 带来的计算复杂性。
.container { display: grid; grid-template-rows: repeat(3, 1fr); row-gap: 10px; /* 每行之间有 10px 的垂直间距 */ }
如果同时需要列间距：
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情 
gap: 10px 20px; /* 行间距 10px，列间距 20px */
注意：gap 不会影响网格容器的外边距，只作用于网格项之间的内部间隙。
确保内容垂直对齐与空间利用
当行高固定或受限时，可能需要控制网格项在行内的对齐方式。使用 align-items 或 align-self 调整垂直对齐。
.container { display: grid; grid-template-rows: repeat(3, 100px); align-items: center; /* 所有子元素在行内垂直居中 */ }
.special-item {align-self: start; / 个别元素靠上对齐 /}
若内容动态变化，建议结合 minmax() 确保最小高度：
grid-template-rows: repeat(3, minmax(80px, 1fr));
这样每行至少 80px 高，空间充足时仍可扩展。
基本上就这些。通过合理设置行高单位、使用 gap 控制间距，并配合对齐属性，就能轻松实现美观且响应式的多行均分布局。不复杂但容易忽略细节。
以上就是如何使用CSS Grid实现多行均分布局_网格行高与间距控制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/994410.html
微信扫一扫 
支付宝扫一扫 
