grid布局

Grid 布局即网格布局

display：grid 或 display：inline-grid 来创建一个网格容器

grid-template-columns 属性和 grid-template-rows 属性

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高，这两个属性在 Grid 布局中尤为重要，它们的值是有多种多样的

1、 repeat() 函数：可以简化重复的值
2、auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。例如：
grid-template-columns: repeat(auto-fill, 200px);
3、fr 关键字：Grid
布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr
单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为
200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。 例如：grid-template-columns:
200px 1fr 2fr;
4、minmax() 函数：我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第