Grid Container 網格容器 主要屬性

gap 屬性

圖片取自W3school

間隙（gutter）就是兩個網格軌道間的空間，建立方式非常類似表格排版的 border-spacing，會在網格基本格之間產生空間。

gap 屬性是 column-gap 以及 row-gap 兩種屬性的縮寫，用來設定列和欄之間的間隙大小。

• column-gap 屬性會指定網格中欄之間的間隙。
• row-gap 屬性指定網格中列之間的間隙。

這兩者屬性值皆是用<length>或<percentage>來設定，可以用如：50px、1em、1fr、50%等數值設定。

注意：網格間隙實際尺寸會受到 align-content 與 justify-content 影響。

如何使用gap

.container{
    display: grid;
    gap: 50px 100px;
/*  表示在網格中行(row)之間的間距設定為 50px，
 * 列(column)之間的間距設定為 100px */
}

對齊屬性

在 Flexbox 有提到對齊屬性，它們也同樣影響 Grid。來複習一下：

justify-content 以及 align-content 屬性

通常使用在多行（或多列）的空間，用來控制多個項目的整體對齊方式。

兩屬性在 Grid 中對齊整個網格，
justify-content 在容器內定義，讓項目沿著容器的主軸(row 列的方向（水平）)對齊，對齊整個 網格軌道（grid tracks） 在容器內的水平方向位置，屬性值用來調整項目在容器上如何分佈。

而 align-content 則是沿著交叉軸(column 行的方向（垂直）)來對齊，對齊整個 網格軌道 在容器內的垂直方向位置。

place-content 屬性

place-content是 justify-content 和 align-content 的簡寫。
使用如下：

.container{
    display: grid;
    place-content: <align-content> <justify-content>;
}

而<align-content>以及<justify-content>屬性值有：start、end、center、sretch、space-between、space-around、space-evenly。

justify-items 以及 align-items 屬性

注意：justify-items 通常不適用於 Flexbox，因為 Flexbox 主要是處理一維對齊（即只有主軸與交叉軸），並且容器的項目會根據 justify-content 和 align-items 來對齊。

Grid 中的影響

在 Grid 中，justify-items 以及 align-items會影響網格容器中所有項目，且只能在網格容器中設定。

1. justify-items 用來控制每個網格項目在其格子內的水平方向（預設作用於行內軸（inline axis））對齊方式，這會影響每個格子內項目的對齊。

• 常用的屬性值：
  start：將項目對齊到容器的起始位置。
  end：將項目對齊到容器的結束位置。
  center：將項目居中。
  stretch：使項目在容器中拉伸（預設行為）。

2. align-items 則控制每個網格項目在其格子內的沿著交叉軸的對齊方式，並且它在 Grid 中會影響每個格子內項目的對齊。

• 常用的屬性值：
  start：將項目對齊到交叉軸的起始位置。
  end：將項目對齊到交叉軸的結束位置。
  center：將項目居中。
  stretch：使項目在容器中拉伸（預設行為）。

place-items 屬性

place-items 屬性是 align-items 和 justify-items 的簡寫，用來控制項目在 Grid 或 Flexbox 佈局中如何對齊。
在 Grid 中用來控制每個格子中的單個項目在容器內的對齊方式。
使用如下：

.item{
    display: grid;
    place-items: <align-items> <justify-items>;
}

屬性值也同place-content，可使用：start、end、center、sretch、space-between、space-around、space-evenly。

參考資料

書<CSS大全第四版>

CSS Grid Layout Module Level 2 - chap.7

Mdn : gap

W3school - CSS Grid Columns, Rows and Gaps