Grid 布局号称是最强大的布局方案，他将网页划分为一个个网格，可以任意组合不通的网格。
基本概念
容器 ：container 采用网格布局的区域
项目 ：item 容器内采用网格定位的子元素
行 ：row 水平区域
列 ：column 垂直区域
单元格：cell 行和列的交叉区域称为单元格，正常情况 m 行 和n 列 会产生 m * n 个单元格
网格线：grid line 水平网格线划分出 行，垂直网格线划分出列；
容器属性：
`display：grid / inline-gird ;`
制定一个容器使用网格布局；
设置后 grid 布局后，item 的 float, dislay:inline-block;display:table-cell, valtical-align,和column-* 都将失效；
gird-template 是下面的简写
grid-template-columns: 定义每一列的宽 可以使用绝对单位，百分比等
grid-template-rows :定义每一行的高
关键字：
repeat() : 重复的次数，重复的值 eg. repeat(3,100px)
auto-fill :自动填充 eg. gird-template-columns: repeat(auto-fill,100px), 按100px 自动去填充，直到不能放置更多；
fr: fraction 的缩写，意为片段， 如果两列的宽度为 1rf , 2fr 就代表后者是前者的2倍；
可以和绝对单位组合使用，除去绝对单位的部分，按 fr 去分配，eg. grid-template-columns: 150px 1fr 2fr;
minmax(min,max) :产生一个长度范围， 接收mix,max 两个参数
auto: 表示由浏览器自己决定
grid-gap: 设置间距
grid-row-gap: 设置行间距
grid-cloumn-gap:设置列间距
grid-template-areas: 用于标记区域
eg.
grid-template-areas: "haeder header header" "sidebar content content" "footer footer footer";
grid-auto-flow: 制定子元素放置顺序 默认 row “先行后列” 从左到右依次；
row: 默认值； 从左到右
column: 从上到下
row dense : 先行后列
column dense: 先列后行
place-items: 是下面的简写，如果只有一个值，则认为第二个值与第一个值相同；
justify-items：start | end | center | stetch; 设置单元格内容的水平位置（左，中，右）； stetch：默认值； 拉伸占满整个宽度
algn-items: start | end | center | stetch; 设置单元格内容的垂直位置（上，中，下）； stetch：默认值； 拉伸占满整个高度
place-content: 是下面的简写；
justify-content: 设置 整个内容区域在容器的水平位置（左，中，右）
align-content: 设置整个内容区域在容器的垂直位置（上，中，下）
属性值有：
start: 对齐容器的起始边框
center:容器内部剧中
end:对齐容器的结束边框
stretch:项目大小没有指定时，拉伸占据整个网格容器
space-around: 每两个项目两侧间隔相等；距离容器有相等的间隔
space-between:项目与项目的间隔相等；距离容器没有间隔
space-evevnly:项目距离项目距离容器的间隔都相等；
项目属性：
grid-column-start,
grid-column-end,
grid-row-start,
grid-row-end,
用来指定项目（item）的位置，具体方法是指定项目的四个边框分别定位在那个网格线；设置横跨，和纵跨；
例如：
`.item1{
grid-cloumn-start:1
grid-cloumn-end: span 2,// 占据2个单元格
}`
grid-column: / 简写
grid-row: / 简写
grid-area: 属性指定item 放在哪一个区域。与grid-template-areas 结合使用 还可以用作：grid-row-start,grid-row-end,grid-column-start,grid-column-end 的简写
grid-area: / / /
place-self: 的简写,如果只有一个值，代表第二个值等于第一个值；
justify-self: 设置单元格内容的水平位置（左，中，右）
align-self: 设置单元格的垂直位置（上，中，下）
属性值：start, center, end , stretch 默认值，占满单元格的整个宽/高度
参考
CSS Grid 网格布局教程： www.ruanyifeng.com/blog/2019/0…
B站视频：【15分钟学会 CSS grid 栅格布局-哔哩哔哩】b23.tv/SZBuTOW
