grid网格布局
认识网格
相关函数和属性
fr fraction片段。是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。
minmax(100px,200px) 函数来创建行或列的最小和最大尺寸,可以接受任何长度值，也接受 auto 值。auto 值允许网格轨道基于内容的尺寸拉伸或挤压。如果条件允许则一直使用最大值，不满足则使用中间值，不能小于最小值。属于范围取值。
repeat(3,100px) 属性可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。[col1-start] 100px [col1-end] 5px [col2-start] 100px,用来自定义网格线名称，用[]包裹。
auto-fill 自动填充。应用子repeat函数中，repeat(auto-fill,minmax(200px,1fr))，代表需要重复的次数会自动填充，尽可能占满屏幕。用来做响应式布局很方便
auto 自动。代表占据剩余高度和宽度的所有。一行代码轻松实现两端固定中间自适应布局grid-template-columns:100px auto 100px;
grid 父容器设置
当设置了网格布局后，column,float,clear,vertical-align将失效
以下设置的都是单元格的大小，并非item的大小，切记切记。当item设置了大小，并且小于单元格时，可以设置item在单元格内水平和垂直方向的排列方式，justify-items\align-items
- display : grid(块级block) | line-grid(行内块inline-block) | subgrid(继承父元素的行和列的大小) ;
设置行数和列数
- grid-template-columns : 40px 50px;列数和每列宽度。不超过grid item的个数
- grid-template-rows ：45px 50px; 行数和每行高度。超过显示的列数，超过的部分将失效；
设置行列间距
- grid-row-gap:20px; 行间距
- grid-column-gap:30px; 列间距
- grid-gap : grid-row-gap grid-column-gap ;两个属性的缩写
设置item排列方向
- grid-auto-flow:row|column; 调整横向或者纵向排列，默认row：横向排列
设置item在单元格内的排列方式
- justify-items:start|center|end|stretch;item在单元格内的水平对齐方式
- align-items：start|center|end|stretch;item在单元格内的垂直对齐方式
- place-items:justify-items align-items;简写形式
设置网格在容器内的排列方式
- justify-content:start|center|end|stretch|space-around|space-between|space-evenly;网格在容器水平方向上的位置
- align-content:start|center|end|stretch|space-around|space-between|space-evenly;网格在容器垂直方向上的位置
- place-content:justify-conent align-content;简写
grid item设置
下列数字都是指的网格线，并不是单元格，切记切记。都是用于合并单元格
- grid-row-start: 2;
- grid-row-end: 4;
- grid-column-start: 1;
- grid-column-end: 3;
- grid-row：1/3; grid-row-start/grid-row-end
- grid-column：1/3 ; 是 grid-column-start/grid-column-end 的简写。
- grid-area : 2/2/3/4 | 单元格名称; grid-row-start/grid-column-start/grid-row-end/grid-column-end。也可以指定单元格名称，把该元素放到单元格名称对应的位置。需要grid-template-areas定义好每个单元格的名称
- grid-template-areas : '单元格1 单元格2 单元格3'; 该属性用来定义网格区域，和单元格相对应，指定各个单元格的名称。
