使用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 控制。
GNCMS可视化拖拽公司网站模板1.0.0
下载
高端网络建设公司设计类网站模板 IT互联网移动建站类网站源码(带手机版数据同步)本套模板采用现在非常流行的全屏自适应布局设计，且栏目列表以简洁，非常时尚大气。后台支持可视拖拽编辑。 模板特点：1、手工书写DIV+CSS、代码精简无冗余。2、自适应结构，全球先进技术，高端视觉体验。3、SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述。4、后台直接修改联系方式、传真、邮箱、地址等，修改更加方
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 干预。
