6.1 属性 grid-gap
CSS Grid Layout 提供了灵活的工具来管理网格元素之间的空间。属性 grid-gap、grid-row-gap 和 grid-column-gap 可以轻松设置行和列之间的距离， 帮助你创建整洁有序的布局。让我们更详细地了解这些属性。
属性 grid-gap（缩写为 gap）定义了网格中行和列之间的总距离。 这是 grid-row-gap 和 grid-column-gap 的简写。
语法：
.grid-container {
grid-gap: value;
}
这里：
-
value: 行和列之间的间距值。可以使用各种单位 (px,%,fr,auto等等)
示例 1：对行和列使用相同的值
在这个例子中，20px 的间距将应用于行和列：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* 20px 间距用于所有行和列 */
}
示例 2：对行和列使用不同的值
在这个例子中，使用两个值：第一个值 10px 用于行，第二个值20px 用于列：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* 行间距 10px，列间距 20px */
}
6.2 属性 grid-row-gap
属性 grid-row-gap 定义了网格中行与行之间的距离。这允许你为行间距指定一个与列无关的独立值。
语法：
.grid-container {
grid-row-gap: value;
}
这里：
value: 行之间的间距值。可以使用各种单位 示例 1：设置固定的行间距
在这个例子中，行之间的距离将是 15px：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* 行间距 15px */
}
示例 2：使用百分比来设置间距
在这个例子中，行之间的距离将是行高的 5%：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* 行高的 5% 间距 */
}
6.3 属性 grid-column-gap
属性 grid-column-gap 定义了网格中列与列之间的距离。这允许你为列间距指定一个与行无关的独立值。
语法：
.grid-container {
grid-column-gap: value;
}
这里：
value: 列之间的间距值。可以使用各种单位
示例 1：设置固定的列间距
在这个例子中，列之间的距离将是 25px：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* 列间距 25px */
}
示例 2：使用 em 为间距设置值
在这个例子中，列之间的距离将是 2em：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* 列间距 2em */
}
6.4 组合使用 grid-row-gap 和 grid-column-gap
你可以组合使用 grid-row-gap 和 grid-column-gap 属性，以更精确地控制行和列之间的间距。
完整实现示例：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三个相同宽度的列 */
grid-template-rows: repeat(3, 100px); /* 三个固定高度的行 */
grid-row-gap: 15px; /* 行间距 15px */
grid-column-gap: 25px; /* 列间距 25px */
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-gap、grid-row-gap 和 grid-column-gap 的使用示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">项目 1</div>
<div class="grid-item item2">项目 2</div>
<div class="grid-item item3">项目 3</div>
<div class="grid-item item4">项目 4</div>
<div class="grid-item item5">项目 5</div>
<div class="grid-item item6">项目 6</div>
</div>
</body>
</html>
代码说明：
-
.grid-container: 创建一个拥有三个相同宽度的列和三个固定高度行的 Grid 容器。 使用grid-row-gap和grid-column-gap属性来设置行和列之间的间距 -
.grid-item: 定义网格元素的基本样式，如背景色、文字颜色、内边距、文本居中和边框
GO TO FULL VERSION