如何在CSS中实现Grid表格样式布局_Grid template-rows与grid-gap结合方法

使用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

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

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;
}
.table > div {
background: white;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
}

HTML结构：

  姓名
  部门
  年龄
  张三
  技术部
  28
  

通过grid-template-rows与grid-gap配合，可以轻松实现类似表格的视觉效果，同时保持布局灵活，无需依赖传统table标签。