3.1 屬性 grid-template-columns
CSS Grid Layout 透過使用行和列讓我們可以創建複雜的網頁佈局。 定義網格結構的兩個關鍵屬性是 grid-template-rows 和 grid-template-columns。
這些屬性允許設置 Grid 容器中行和列的數量和大小，給予開發者對元素佈局的完全控制。
屬性 grid-template-columns 定義網格中的列數量和大小。它可以接受一個或多個值，這些值可以以各種單位指定，例如像素 (px)、
百分比 (%)、彈性單位 (fr) 和其他。
範例 1: 設定固定列大小
在這個例子中，網格將由三列組成。第一列的寬度為 100px，第二列的寬度為 200px，第三列的寬度為 100px：
.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px; /* 三列具有固定大小 */
}
範例 2: 使用彈性單位 (fr)
在這個例子中，網格將由三列組成。第一和第三列將佔據相同數量的空間，而第二列將是它們每一個寬度的兩倍：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列具有彈性大小 */
}
範例 3: 使用重複功能 (repeat)
在這個例子中，使用了 repeat 函數，這可以簡化編寫。網格將由三列寬度相等的列組成：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三個相等的列 */
}
範例 4: 設定最小和最大大小 (minmax)
在這個例子中，三個列中的每一個將具有最小寬度 100px 和彈性大小，這可以根據可用空間增加到 1fr：
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 三列最小寬度 100px 和彈性大小 */
}
3.2 屬性 grid-template-rows
屬性 grid-template-rows 與 grid-template-columns 類似，但它定義網格中的行數量和大小。它也接受一個或多個值，可以以不同的單位指定。
範例 1: 設定固定行大小
在這個例子中，網格將由三行組成。第一行的高度為 50px，第二行的高度為 100px，第三行的高度為 50px：
.grid-container {
display: grid;
grid-template-rows: 50px 100px 50px; /* 三行具有固定大小 */
}
範例 2: 使用彈性單位 (fr)
在這個例子中，網格將由三行組成。第一和第三行將佔據相同數量的空間，而第二行將是它們每一個高度的兩倍：
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr; /* 三行具有彈性大小 */
}
範例 3: 使用重複功能 (repeat)
在這個例子中，使用了 repeat 函數，這可以簡化編寫。網格將由三行高度相等的行組成：
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* 三行相等的行 */
}
範例 4: 設定最小和最大大小 (minmax)
在這個例子中，三行中的每一行將具有最小高度 50px 和彈性大小，這可以根據可用空間增加到 1fr：
.grid-container {
display: grid;
grid-template-rows: repeat(3, minmax(50px, 1fr)); /* 三行最小高度 50px 和彈性大小 */
}
3.3 屬性結合
結合屬性 grid-template-rows 和 grid-template-columns
這些屬性可以一起使用，創建具有不同行和列尺寸的複雜網格。
這個例子中，網格將由兩列組成：第一列佔據可用空間的 1 份，第二列佔據 2 份。網格也將由兩行組成：第一行高 100px，
第二行高 200px。
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
}
完整實現範例：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">元素 1</div>
<div class="grid-item">元素 2</div>
<div class="grid-item">元素 3</div>
<div class="grid-item">元素 4</div>
</div>
</body>
</html>
程式碼說明：
.grid-container：定義容器為 grid 容器，具有兩列和兩行。元素間的間隙由gap屬性設置。.grid-item：定義網格元素的基本樣式，如背景顏色、文字顏色、填充、文字置中和邊框。
GO TO FULL VERSION