使用CSS Grid可轻松实现等高行列布局：1. 设置display: grid并定义grid-template-columns和grid-template-rows，同一行子元素自动等高、同列等宽；2. 可通过grid-template-rows固定行高；3. 使用grid-auto-rows配合minmax实现自适应行高与自动换行；4. 跨行列元素仍保持网格对齐。
使用 CSS Grid 实现等高行列布局非常直接，不需要额外的 JavaScript 或浮动布局技巧。Grid 布局天然支持行和列的对齐与尺寸控制，能自动让同一行的项目等高、同一列的项目等宽。
1. 基本等高行列布局
只要将容器设置为 display: grid，并定义行和列，Grid 会自动让同一行中的子元素高度一致，同一列中的宽度一致。
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */ grid-template-rows: auto; /* 行高由内容决定，但同一行等高 */ gap: 10px;}.item { background: #e0e0e0; padding: 20px;}
HTML 结构示例：
立即学习“前端免费学习笔记（深入）”；
内容较少内容较多，高度更高，其他同列项也会随之拉高中等内容第二行第二行第二行
在这个例子中，每行的三个元素高度相同（取决于该行中最高的那个），每列的宽度也相等。
2. 固定行高或列宽
如果希望行高统一固定，可以显式设置 grid-template-rows。
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; /* 每行固定 100px 高 */ gap: 10px;}
这样所有行都会是 100px 高，超出内容可配合 overflow 控制。
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情
3. 自动换行与等高（多行网格）
当项目数量不确定时，可用 grid-auto-rows 配合 grid-template-columns 实现自动换行且保持等高。
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(80px, auto); /* 最小 80px，内容多时自动撑开 */ gap: 10px;}
这种方式适合卡片布局，每行项目等高，新增项目自动换行。
4. 跨行列仍保持等高
即使某些项目使用 grid-column 或 grid-row 跨越多列或多行，其余项目仍会按网格轨道对齐。
.item-wide { grid-column: span 2; background: #c0c0c0;}
跨列的元素会影响所在行的高度，其所在行的所有项目依然等高。
基本上就这些。Grid 的强大之处在于它自动处理了对齐和尺寸分配，无需手动计算或 JS 干预。
以上就是如何用css grid实现等高行列布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1075123.html
微信扫一扫 
支付宝扫一扫 
