8.1 屬性 justify-content
CSS Grid Layout 提供了強大的工具來管理整個網格容器在可用空間內的對齊。屬性 justify-content、align-content 和 place-content
允許我們控制容器內的行和列的對齊，這樣能在創建佈局時提供靈活性和精確度。
屬性 justify-content 控制整個網格容器內的水平對齊。當容器的大小比網格本身的必要寬度大時，這個屬性就很有用。
語法：
.grid-container {
display: grid;
justify-content: value;
}
其中: value 可以有以下值：
start: 對齊網格到容器的開始end: 對齊網格到容器的結束center: 對齊網格於容器的中心stretch: 拉伸網格以填滿整個容器space-around: 在每個元素周圍放置相等的空間space-between: 在元素之間放置相等的空間space-evenly: 在元素和容器邊緣之間放置相等的空間
範例1: 對齊到容器開始
在這個範例中，所有內容都會對齊到容器的左邊緣：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: start; /* 對齊內容到容器的左邊緣 */
}
範例2: 內容居中
在這個範例中，所有內容將會居中於容器內：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center; /* 在容器內居中內容 */
}
8.2 屬性 align-content
屬性 align-content 決定網格內容在垂直軸上如何在 grid 容器內對齊。當網格未填滿所有可用垂直空間時，它很有用。
語法：
.grid-container {
align-content: value;
}
其中: value 是決定內容垂直對齊的值。可能的值:
start: 對齊內容到容器的開始end: 對齊內容到容器的結束center: 在容器內居中內容space-between: 內容之間放置相等的距離space-around: 在每個元素周圍放置相等的距離space-evenly: 在元素和容器邊緣之間放置相等的空間stretch(默認值): 拉伸內容以填充所有可用空間
範例1: 對齊到容器開始
在這個範例中，所有內容將對齊到容器的頂部邊緣：
CSS
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: start; /* 對齊內容到容器的頂部邊緣 */
}
範例2: 內容居中
在這個範例中，所有內容都會居中於容器內：
CSS
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: center; /* 在容器內居中內容 */
}
8.3 屬性 place-content
屬性 place-content 是 justify-content 和 align-content 同時設置值的縮寫。
語法：
.grid-container {
place-content: justify-value align-value;
}
其中:
justify-value: 水平對齊的值 (justify-content)align-value: 垂直對齊的值 (align-content)
範例1: 水平和垂直居中內容
在這個範例中，所有內容將會在容器內水平和垂直居中：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
place-content: center center; /* 水平和垂直居中內容 */
}
範例2: 拉伸內容到寬度並對齊到頂部
在這個範例中，內容會被拉伸到容器的寬度並對齊到頂部邊緣：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
place-content: stretch start; /* 拉伸內容到寬度並對齊到頂部 */
}
8.4 完整實現範例
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 三個固定寬度的列 */
grid-template-rows: repeat(3, 100px); /* 三個固定高度的行 */
gap: 10px;
place-content: center center; /* 水平和垂直居中內容 */
}
.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 容器對齊範例</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 容器。使用place-content屬性來水平和垂直居中內容 -
.grid-item: 定義網格元素的基本樣式，例如背景顏色、文字顏色、間距、文字對齊及邊框
GO TO FULL VERSION