主要記錄和解釋grid屬性，不做解釋
父級
display:reid屬性
| 屬性 | 值 | 說明 |
|---|---|---|
| display | gird,inline-gird,subgird | 定義父級容器，繼承父級容器 |
| grid-template-columns | px,fr,%,auto,em ~ ~ | 用來定義網(wǎng)格的列 |
| grid-template-rows | px,fr,%,auto,em ~ ~ | 用來定義網(wǎng)格的行 |
| grid-template-areas | grid-area | 通過引用 grid-area 屬性名稱來定義網(wǎng)格模板。 |
| grid-column-gap | px,fr,%,auto,em ~ ~ | 指定網(wǎng)格線(grid lines)列的大小。 |
| grid-row-gap | px,fr,%,auto,em ~ ~ | 指定網(wǎng)格線(grid lines)行的大小。 |
| grid-gap | px,fr,%,auto,em ~ ~ | 指定網(wǎng)格線行/列的大小的縮寫 |
| justify-items （子級左右） | start、end、center、stretch | 左對齊、右對齊、左右居中、填充 |
| align-items （子級上下） | start、end、center、stretch | 上對齊、下對齊、上下居中、填充 |
| justify-content （父級左右） | start、end、center、stretch、space-around、space-between、space-evenly | 左對齊、右對齊、左右居中、填充、左右固定間隔居中、均勻間隔居中、左右均勻間隔居中 |
| align-content （父級上下） | start、end、center、stretch、space-around、space-between、space-evenly | 上對齊、下對齊、上下居中、填充、上下固定間隔居中、上下間隔居中、上下均勻間隔居中 |
| grid-auto-flow | row、column、dense | 告訴自動布局算法依次填充每行或者每列、告訴自動布局算法在稍后出現(xiàn)較小的網(wǎng)格項(xiàng)時，嘗試填充網(wǎng)格中較早的空缺 |
子級
items屬性
| 屬性 | 值 | 說明 |
|---|---|---|
| grid-column-start | name/number/auto | 行開始網(wǎng)格線 |
| grid-column-end | name/number/auto | 行結(jié)束網(wǎng)格線 |
| grid-row-start | name/number/auto | 列開始網(wǎng)格線 |
| grid-row-end | name/number/auto | 列開始網(wǎng)格線 |
| grid-area | name | 命名模板名稱 |
| justify-self | start、end、center、stretch | 左對齊、右對齊、左右居中、填充 |
| align-self | start、end、center、stretch | 上對齊、下對齊、上下居中、填充 |
