經由前面打下的基礎，這時候最適合繼續進階到 Grid，所以在剩下的時間裡我將盡快的介紹完 Grid。
CSS Grid Layout （網格佈局，簡稱：Grid）是CSS佈局模型，也是一種二維佈局模型（two‑dimensional），可以同時控制兩個維度（橫軸與縱軸）對齊與控制box的尺寸與位置，提供了一個基於網格（具有行和列）的佈局系統。
與 Flexbox 類似，Grid 包含：
Grid Container 網格容器 -
為父(容器)（ the parent (container)），定義了網格格式化環境（grid formatting context）。
Grid Items 網格項目 - 為網格容器內的子元素，其子世代就不會是網格元素。但網格項目本身也可以成為 Grid Container，讓子世代成為巢狀網路中的網格項目。
（注意：Grid Layout 裡的子網格（subgrid）與巢狀網格容器這兩者概念不同。）
Grid 也同 Flexbox 一樣是藉由設定 display: grid 和 display: inline-grid產生，前者產生區塊級方框；後者產生行內方框。
| 屬性 | 說明 |
|---|---|
grid-template-columns |
定義欄（column）的寬度與數量 |
grid-template-rows |
定義列（row）的高度與數量 |
grid-template-areas |
使用命名方式定義區域（template area） |
grid-template |
columns、rows、areas 的縮寫寫法 |
grid-auto-columns |
自動生成的欄寬設定（隱性欄） |
grid-auto-rows |
自動生成的列高設定（隱性列） |
grid-auto-flow |
控制自動放置的方向（row / column / dense） |
gap |
行與列的間距（欄與列的間隔） |
place-items |
控制格內項目的水平/垂直對齊方式，justify-items + align-items 的簡寫 |
place-content |
控制整個 grid 的水平/垂直對齊justify-content + align-content 的簡寫 |
| 屬性 | 說明 |
|---|---|
grid-column |
grid-column-start / grid-column-end 的簡寫，元素要從哪一條欄線開始/結束。 |
grid-row |
grid-row-start / grid-row-end 的簡寫，元素要從哪一條列線開始/結束。 |
grid-area |
可以同時指定 row、column 的開始跟結束，或對應 template areas 的名稱 |
place-self |
控制該項目的水平/垂直對齊方式justify-self + align-self 的簡寫 |
書<CSS大全第四版>
CSS Grid Layout Module Level 2
W3school - CSS Grid Layout Module
iThome鐵人賽
看影片追技術