| 屬性 | 說明 |
|---|---|
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 |
行與列的間距（欄與列的間隔） |
在 grid layout配置中，網格容器的內容是透過將網格容器定位並對齊到網格來佈局。
網格線是一組相交的水平和垂直分界線，網格線存在於欄或列的任一側。它們可以透過數值索引或作者指定的名稱來引用，可將網格容器的空間劃分為網格區域（grid areas），網格項目可以放置在其中。
網格軌道（Grid track i）是網格欄（grid column）或網格列（grid row）的通用術語，換句話說，它是兩條相鄰網格線之間的空間。
網格儲存格（grid cell）是網格欄和網格列的交集。它是定位網格項目時可以參考的網格最小單位。
grid-template-columns 以及 grid-template-rows 屬性主要用來定義網格（grid）的列與行的寬度與數量，透過這兩者屬性就能夠在網格樣板（grid template）裡定義網格線（Grid lines）。
grid-template-columns 這個 屬性用來定義網格欄位（grid columns）的 線名稱（line names）以及 軌道大小設定方式（track sizing functions）。grid-template-rows 則是定義了網格列（grid rows）的線名稱以及軌道大小設定方式。
| grid-template-columns / rows屬性值 | 說明 |
|---|---|
| none | 表示沒有明確定義任何軌道（track），格線的尺寸由內容或其他屬性決定。 |
| track-list | 明確定義一系列軌道（欄/列）的大小與數量。 |
| auto-track-list | 根據容器寬度自動填入儘可能多的欄位，自動調整格數，適合響應式（responsive）設計。 |
書<CSS大全第四版>
CSS Grid Layout Module Level 2 - chap.7
W3school - CSS Grid Columns, Rows and Gaps
iThome鐵人賽
看影片追技術