如果熟悉 flexbox 的對齊屬性，在這邊的用法也是大同小異。在 grid 中因為沒有主次軸的概念， justify-* 通常是操控"行"，align-* 是操控"列"。grid 容器對齊屬性要見Day25，而能夠使用在 grid 的項目對齊屬性包括：

1.justify-self
2.align-self

justify-self / align-self

.item {
  justify-self: stretch | start | end | center | left | right | self-start | self-end | baseline | first baseline | last baseline;
  align-self: stretch | start | end | center | self-start | self-end | baseline | first baseline | last baseline;
}
預設:stretch

繼 flexbox 了解到項目中的給予 align-self 屬性是可以在單一一個項目裡覆寫容器中 align-items 所繼承下來的屬性後，grid 中的 justify-self / align-self 概念也是如此，並且可以操控單一個網格項目在網格容器中的位置。

而 justify-self 是操控網格項目在網格區域中"行"的位置，align-self 則是操控網格項目在網格區域中"列"的位置。

1. stretch 為預設，在網格項目中沒有設定尺寸時，網格項目會拉伸填滿網格區域。

2. start、end、center 即為將網格項目對齊網格區域的開頭、終點、中間。（justify-self 的開頭就是左邊、align-self 的開頭是上面）

3. 在justify-self 中 left、right 屬性值和 start、end 的表現幾乎是一樣的，雖然有些地方有說明 align-self 也有 left、right，但實際用起來沒有什麼作用。

4. self-start、self-end 雖然同樣是網格項目隊齊網格區域的起始、終點，但對齊的條件多了會"跟隨語言的方向來決定起始和終點"。常見的語言預設上為 direction: ltr;（可以在容器做設定）意即為由左至右的語言，如果換成 rtl 由右至左，則 justify-self 的 self-start、self-end 會跟著相反。

5. baseline、last baseline、first baseline 會對齊基準線、最後一條基準線、第一條基準線。文件中有對其進行說明：algo-baseline-shims，老實說我有點看不懂在說什麼 XD（然後開始懷疑人生），或許不是個常會使用到的屬性值。

資料來源：

• CSS 大全第四版

• CSS grid Layout Module Level 1

• CSS align-self