使用grid-template-rows定义行高并结合grid-gap设置间距，可实现结构清晰的Grid表格布局。例如：.container { display: grid; grid-template-rows: repeat(4, 80px); grid-gap: 10px; } 配合列定义与弹性单位，能构建视觉整齐、无需table标签的数据展示界面。
在CSS中实现Grid表格样式布局，关键在于合理使用grid-template-rows定义行高，结合grid-gap控制单元格之间的间距。这种方法能快速构建结构清晰、视觉整齐的网格布局，特别适合数据展示类表格或卡片排列。
grid-template-rows用于明确每行的高度。你可以使用固定值（如px）、弹性单位（fr）或百分比来分配空间。
例如，创建一个四行、每行高度为60px的布局：
.container {
display: grid;
grid-template-rows: 60px 60px 60px 60px;
}也可以混合使用不同单位：
立即学习“前端免费学习笔记（深入）”；
grid-template-rows: 50px 1fr 2fr;
这表示第一行固定50px，后两行按1:2的比例分配剩余空间。
grid-gap（或现代写法gap）用于设置网格项之间的间距，包括行间距和列间距。
单独设置行列间距：
.container {
grid-gap: 20px 10px; /* 行间距20px，列间距10px */
}若只设一个值，则行列间距相同：
grid-gap: 15px;
下面是一个完整的表格式布局示例，包含4行、每行高度一致，并设置合适的间隙：
.table {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 定义三列 */
grid-template-rows: repeat(4, 80px); /* 四行，每行80px */
grid-gap: 10px;
padding: 10px;
background-color: #f0f0f0;
}
<p>.table > div {
background: white;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
}HTML结构：
<div class="table"> <div>姓名</div> <div>部门</div> <div>年龄</div> <div>张三</div> <div>技术部</div> <div>28</div> <!-- 更多行... --> </div>
通过grid-template-rows与grid-gap配合，可以轻松实现类似表格的视觉效果，同时保持布局灵活，无需依赖传统table标签。
以上就是如何在CSS中实现Grid表格样式布局_Grid template-rows与grid-gap结合方法的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
120
收藏
