初學者指南：CSS Grid 中的 justify-content、align-items、align-content 和 justify-items
更新日期： 2024 年 11 月 5 日
在 CSS Grid 中，布局不僅僅是決定元素的位置和大小，還包括如何對齊網格及其內部的元素。
為此，CSS Grid 提供了四個非常有用的屬性：justify-content、align-items、align-content 和 justify-items。
這些屬性讓我們可以更靈活地，控制網格中的元素位置和對齊方式，並能有效改善網頁的整體視覺效果。
本文將逐一介紹這些屬性的概念及用法。
justify-content：水平對齊整個網格
justify-content 屬性用於控制整個網格，在水平方向上的對齊方式。
當網格的寬度小於其容器時，我們可以使用 justify-content 來指定網格在水平方向上是靠左、靠右、居中，還是分散排列。
常見取值：
start：將網格對齊到容器的左側。end：將網格對齊到容器的右側。center：將網格置於容器的中央。space-between：將網格項目間距拉開，使其在容器中平均分佈。space-around：每個網格項目兩側會有等距間隔，但首尾的間隔只有一半。space-evenly：每個網格項目及其首尾之間的間隔相等。
範例：
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: space-between;
}此範例中，三個網格項目將在容器中平均分布，項目間的間隔均等分佈在容器的水平方向上。
align-content：垂直對齊整個網格
align-content 用於控制整個網格在垂直方向上的對齊方式。
當網格的高度小於容器時，這個屬性可以指定網格在容器中的垂直對齊方式。
常見取值：
start：將網格對齊到容器的頂部。end：將網格對齊到容器的底部。center：將網格置於容器的中央。space-between：將網格項目間距拉開，使其在容器中平均分佈。space-around：每個網格項目兩側會有等距間隔，但首尾的間隔只有一半。space-evenly：每個網格項目及其首尾之間的間隔相等。
範例：
.container {
display: grid;
grid-template-rows: repeat(2, 100px);
align-content: center;
height: 400px;
}在此範例中，網格的總高度為 200px，而容器高度為 400px。
使用 align-content: center; 會使網格置於容器的中央。
justify-items：水平對齊網格中的項目
justify-items 屬性用於控制每一個網格項目在其網格單元中的水平對齊方式。
這與 justify-content 不同的是，justify-items 影響的是單個項目在每個單元格中的對齊，而非整個網格在容器中的對齊。
常見取值：
start：將每個網格項目對齊到單元格的左側。end：將每個網格項目對齊到單元格的右側。center：將每個網格項目置於單元格的中央。stretch（預設值）：將每個網格項目拉伸至單元格的寬度。
範例：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}在此範例中，所有的網格項目都會在單元格內水平居中對齊。
align-items：垂直對齊網格中的項目
align-items 屬性用於控制每個網格項目在單元格中的垂直對齊方式。
和 justify-items 類似，不過 align-items 是針對垂直方向的對齊設定。
常見取值：
start：將每個網格項目對齊到單元格的頂部。end：將每個網格項目對齊到單元格的底部。center：將每個網格項目置於單元格的中央。stretch（預設值）：將每個網格項目拉伸至單元格的高度。
範例：
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
align-items: end;
}此範例中，所有網格項目會在單元格內對齊底部。
綜合範例：應用所有屬性
以下範例展示了如何在同一個網格布局中同時使用這四個屬性：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
justify-content: space-around; /* 水平對齊整個網格 */
align-content: center; /* 垂直對齊整個網格 */
justify-items: center; /* 水平對齊每個項目 */
align-items: end; /* 垂直對齊每個項目 */
}在這個範例中：
justify-content: space-around;會使整個網格在容器的水平方向上平均分布空間。align-content: center;會使整個網格在容器的垂直方向上居中。justify-items: center;會讓每個網格項目在單元格內水平居中。align-items: end;會讓每個網格項目在單元格內垂直靠底部對齊。
這些屬性可以搭配使用，使您的網頁設計更加靈活且精確。
結語
justify-content、align-content、justify-items 和 align-items 是 CSS Grid 中控制對齊的四個重要屬性。
它們提供了豐富的對齊選項，可以靈活地調整整個網格，或單個項目在容器中的位置。
掌握這些屬性，能讓您的 CSS Grid 佈局更加精緻和符合需求。
嘗試在實際項目中應用這些屬性，將能幫助您創造更具結構性的網頁布局。