7.1 屬性 justify-items
CSS Grid Layout 提供了有效的工具來處理網格內元素的排列。屬性
justify-items、align-items 和 place-items 讓你能夠精確地設定 grid 元素在各自 cell 中的水平和垂直排列。讓我們更詳細地看看這些屬性。
justify-items 屬性決定了所有 grid 元素在其 cell 中的水平排列方式。
語法：
.grid-container {
justify-items: value;
}
其中:
-
value: 決定元素的水平排列方式。可能的值有：start: 將元素靠齊 cell 開始處end: 將元素靠齊 cell 結束處center: 將元素在 cell 中置中stretch(預設): 拉伸元素以填滿整個 cell 寬度
範例 1: 靠齊 cell 開始處排列
在這個範例中，所有元素會靠齊它們各自 cell 的左邊：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: start; /* 所有元素靠左排列 */
}
範例 2: 將元素置中排列
在這個範例中，所有元素會在它們各自 cell 中居中：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center; /* 所有元素置中排列 */
}
7.2 屬性 align-items
align-items 屬性決定了所有 grid 元素在其 cell 中的垂直排列方式。
語法：
.grid-container {
align-items: value;
}
其中：
-
value: 決定元素的垂直排列方式。可能的值有：start: 將元素靠齊 cell 開始處end: 將元素靠齊 cell 結束處center: 將元素在 cell 中垂直置中stretch(預設): 拉伸元素以填滿整個 cell 高度
範例 1: 靠齊 cell 開始處排列
在這個範例中，所有元素會靠齊它們各自 cell 的上邊：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
align-items: start; /* 所有元素靠上排列 */
}
範例 2: 垂直中心排列元素
在這個範例中，所有元素會在它們各自 cell 中垂直居中：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
align-items: center; /* 所有元素垂直居中排列 */
}
7.3 屬性 place-items
place-items 屬性是用來同時設定 align-items 和 justify-items 的簡寫。
語法：
.grid-container {
place-items: align-value justify-value;
}
其中：
align-value: cell 內垂直排列的值 (align-items)justify-value: cell 內水平排列的值 (justify-items)
如果只為 place-items 指定了一個值，例如 place-items: stretch，元素將在兩個方向上排列。
範例 1: 垂直與水平都置中排列元素
在這個範例中，所有元素將在它們的 cell 中同時水平和垂直置中：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
place-items: center; /* 元素同時水平和垂直置中 */
}
範例 2: 元素高度拉伸並靠齊左上角排列
在這個範例中，所有元素將在高度上拉伸並垂直靠齊它們各自 cell 的左上角：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
place-items: stretch start; /* 元素拉伸填滿高度並靠齊左上角 */
}
7.4 完整實現範例
完整實現範例：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三個等寬的列 */
grid-template-rows: repeat(3, 100px); /* 三個固定高度的行 */
gap: 10px;
place-items: 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>CSS 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-items屬性將元素同時在水平和垂直方向上居中。 -
.grid-item: 定義了網格元素的基本樣式，比如背景顏色、文字顏色、內邊距、 文字居中和邊框。
GO TO FULL VERSION