gird布局

参照：https://juejin.cn/post/6854573220306255880

和

https://juejin.cn/post/6922062483196903438#heading-25

父容器声明，display：grid 或 display：inline-grid

grid-template-columns 和 grid-template-rows

grid-template-columns 属性设置列宽()，grid-template-rows 属性设置行高
他们会自动分配元素

repeat() 函数

如果有几列或者几行要设置同样的宽度可以用repeat（几个一样的，大小）

auto-fill

表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格

fr

fr 单位代表网格容器中可用空间的一等份

minmax() 函数

网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中
grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。

auto

制动填充剩余空间

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。

grid-auto-rows，grid-auto-column

grid-auto-rows，grid-auto-column表示每行或者每列中每个盒子的大小

justify-items 属性

justify-items: start | end | center | stretch
根据内容适应大小，觉得他们是在网格的哪里排列

align-items同上只是是竖直位置

justify-content

整体在视口的排列位置

justify-content: space-around

justify-content: space-between

justify-content: space-evenly

grid-auto-columns 属性，grid-auto-rows 属性

当你定义了3行网格时候但是实际上有6行，超出的网格浏览器会默认你之前定义的为主，但是你也可以通过 grid-auto-columns 属性，grid-auto-rows 属性来设置超出的元素的大小

grid-template-areas

.代表没东西

grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性可以指定每个网格的位置

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线

justify-self 属性，align-self 属性，place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个网格。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个网格。