本篇將介紹以下 3 個屬性:
items
指所有內元素,而 justify
、align
分別指每一個 grid cell 的主軸和交錯軸的方向(水平和垂直)。
start
:對齊區域的軸線起點end
:對齊區域的軸線終點center
:對齊區域的中央stretch
:伸展區域直到填滿整條軸線為justify-items
、align-items
的縮寫。
.container {
place-items: <align-items> <justify-items>
}
.container {
place-items: center end;
}
相等於
.container {
align-items: center;
justify-items: end;
}
參考資料:
CSS進階:Grid格線佈局