CSS Grid 網格佈局

今天來分享一下關於CSS Grid 網格佈局的知識點。
Grid網格佈局是一種二維佈局方案，橫縱兩個方向總是同時存在。語法書寫分爲兩部分，一種是在Grid容器上，一種在Grid子項中。
作用在Grid容器中：
1.display：grid;表示爲網格佈局；
grid-template-columns和grid-template-rows:分別表示設置列寬和設置行高。例如：
2.grid-template-columns:100px 100px 200px 300px;(設置每列的寬）
grid-template-rows:100px 100px 200px;（設置每行的高）
表示設計了一個4列3行的網格，且每個網格大小不一樣。
此時，網格佈局提供一個新的單位：fr(比例單位）表示佔其中的幾部分。
可寫作repeat（）；例如：grid-template-columns:repeat（4，1fr）;表示將父容器的寬平均分爲四部分作爲子項的寬。
注：這種簡寫只能用於比例相同時。
3.grid-template-areas：表示給網格劃分區域，且需要grid-area在子項中設置配合。
grid-templates-areas:「one one three」
「two two three」
「two two three」;
grid-area:one/two/three;(子容器中）
注：劃分區域必須是矩形。
4.Grid-template:是grid-template-columns、grid-template-rows 和grid-template-areas
複合寫法；
5.grid-column-gap 與grid-row-gap:分別表示列間距和行間距;
例如：grid-column-gap：10px; grid-row-gap:10px;
grid-gap:表示複合寫法，先寫行，後寫列；
6.justify-items：子項的居中方式，針對水平方向（非默認值時，寬度由內容決定）
取值：start center end
默認值:stretch:拉伸，表現爲垂直填充；
7.align-items：子項的居中方式，針對垂直方向（非默認值時，高度由內容決定）
取值：start center end
默認值:stretch:拉伸，表現爲水平填充；
8.place-items：justify-items和align-items的複合寫法，先寫垂直居中，後寫水平居中。
9.justify-content：對網格元素的水平分佈方式
取值：stretch(默認） start center end space-between space-around
Space-evenly
10.align-content:對網格元素的垂直分佈方式
取值：stretch(默認） start center end space-between space-around
Space-evenly
11.Place-content:是justify-content和align-content的複合寫法。

作用在子項上：
1.grid-column-start：水平方向起始位置 grid-column-end:水平方向終點位置
取值爲默認線的名字；如：grid-column-start：1；grid-column-end:2；
2.grid-row-start：垂直方向起始位置 grid-row-end:垂直方向終點位置
取值爲默認線的名字；如：grid-row-start：1；grid-row-end：2；
3.grid-area：找指定區域分爲兩種：
(1)對應網格的名字：grid-area：one;
(2)對應線的數字：grid-area：grid-row-start/grid-column-start/grid-row-end/
grid-column-end；
4.justify-self：單個網格元素的水平對齊方式
取值：start center end
5.align-self:單個網格元素的垂直對齊方式
取值：start center end
6.Place-self:是justify-self和align-self的複合寫法。
代碼演示：
HTML 代碼

CSS代碼：

結果演示：