網格佈局中的盒模型對齊

基本示例

在這個使用網格佈局的示例中，在網格容器中佈局固定寬度的軌道後，主軸上有多餘的空間。此空間使用justify-content進行分配。在交叉軸上，專案在其網格區域內的對齊方式由align-items控制。第一個專案透過將align-self設定為center來覆蓋組上設定的align-items值。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />has <br />extra <br />text</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

body {
  font-family: sans-serif;
}
.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  align-items: start;
  justify-content: space-between;
  border: 2px dotted rgb(96 139 168);
}

.box :first-child {
  align-self: center;
}

網格軸

作為一種二維佈局方法，在使用網格佈局時，我們總是有兩個軸可以對齊我們的專案。我們可以使用所有盒對齊屬性來實現這一點。

內聯軸是與句子中單詞在所使用的書寫模式中執行方向對應的軸。因此，在像英語或阿拉伯語這樣的水平語言中，內聯方向水平執行。如果您處於垂直書寫模式，內聯軸將垂直執行。

要對齊內聯軸上的內容，您可以使用以justify-開頭的屬性：justify-content、justify-items和justify-self。

塊軸與內聯軸交叉，其方向是塊在頁面中向下顯示的方向——例如，英語中的段落垂直顯示，一個接一個。這是塊維度。

要對齊塊軸上的內容，您可以使用以align-開頭的屬性：align-content、align-items和align-self。

自身對齊

這些屬性處理在放置專案時，專案在其網格區域內的對齊方式

• justify-self
• align-self
• place-self
• justify-items
• align-items
• place-items

*-items屬性，align-items和justify-items，應用於網格容器，並設定所有網格專案的組對齊方式。*-self屬性，align-self和justify-self，則設定在網格專案上。這意味著您可以設定所有網格專案的對齊方式，然後透過將align-self或justify-self屬性應用於單個網格專案的規則來覆蓋任何需要不同對齊方式的專案。

align-items和justify-items的初始值是stretch，align-self和justify-self的初始值是auto，因此專案將延伸到整個網格區域。此規則的例外情況是專案具有固有縱橫比的情況，例如影像。在這種情況下，專案將在兩個維度上對齊到start，以避免影像失真。

內容對齊

當有額外空間可供分配時，這些屬性處理網格軌道的對齊

• justify-content
• align-content
• place-content

如果定義的軌道總和小於網格容器的總寬度，就會出現這種情況。

間隙和舊版 grid-gap 屬性

這些屬性定義了網格容器內網格專案之間的間距

• row-gap
• column-gap
• gap

網格規範最初包含了屬性grid-row-gap、grid-column-gap和grid-gap的定義。這些屬性後來被移到盒對齊規範中，並被別名為row-gap、column-gap和gap。這使得它們可以用於其他在專案之間存在間隙有意義的佈局方法。

另見

• 盒對齊概述

• Flexbox 中的盒模型對齊

• 多列布局中的盒模型對齊

• 塊級、絕對定位和表格佈局的盒模型對齊

• 在 CSS 網格佈局中對齊專案