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代码：

结果演示：