[Part 4] 介紹 Grid 外容器屬性

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

content 則是指 grid cell 整體的分布，justify、align 一樣指主軸和交錯軸的方向（水平和垂直）

• start：預設值，對齊 grid container 的軸線起點
• end：對齊 grid container 的軸線結點
• center：對齊grid container 的軸線中央
• stretch：伸展直到填滿 grid container 的軸線
• space-around：各區域左右各自插入空隙
• space-between：各區域之間插入空隙
• space-evenly：各區域之間及與外容器間均分空隙

justify-content

CodePen 範例

• justify-content：start

• justify-content：center

• justify-content: end

• justify-content：stretch

• justify-content: space-around

• justify-content: space-between

• justify-content: space-evenly

align-content

CodePen 範例

• align-content：start

• align-content：end

• align-content：center

• align-content：stretch

• align-content：space-around

• align-content：space-between

• align-content：space-evenly

place-content

justify-content、align-content 的縮寫。

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

.container {
	place-content: center end;
}

相等於

.container {
	align-content: center;
	justify-content: end;
}

參考資料：
CSS進階：Grid格線佈局