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