使用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 布局天然支持行和列的对齐与尺寸控制，能自动让同一行的项目等高、同一列的项目等宽。
只要将容器设置为 display: grid，并定义行和列，Grid 会自动让同一行中的子元素高度一致，同一列中的宽度一致。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
grid-template-rows: auto; /* 行高由内容决定，但同一行等高 */
gap: 10px;
}
.item {
background: #e0e0e0;
padding: 20px;
}
HTML 结构示例：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div class="item">内容较少</div> <div class="item">内容较多，高度更高，其他同列项也会随之拉高</div> <div class="item">中等内容</div> <div class="item">第二行</div> <div class="item">第二行</div> <div class="item">第二行</div> </div>
在这个例子中，每行的三个元素高度相同（取决于该行中最高的那个），每列的宽度也相等。
如果希望行高统一固定，可以显式设置 grid-template-rows。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px; /* 每行固定 100px 高 */
gap: 10px;
}
这样所有行都会是 100px 高，超出内容可配合 overflow 控制。
当项目数量不确定时，可用 grid-auto-rows 配合 grid-template-columns 实现自动换行且保持等高。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(80px, auto); /* 最小 80px，内容多时自动撑开 */
gap: 10px;
}
这种方式适合卡片布局，每行项目等高，新增项目自动换行。
即使某些项目使用 grid-column 或 grid-row 跨越多列或多行，其余项目仍会按网格轨道对齐。
.item-wide {
grid-column: span 2;
background: #c0c0c0;
}
跨列的元素会影响所在行的高度，其所在行的所有项目依然等高。
基本上就这些。Grid 的强大之处在于它自动处理了对齐和尺寸分配，无需手动计算或 JS 干预。
以上就是如何用css grid实现等高行列布局的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
317
