grid布局：网格布局，通过在父元素上设置display:grid;来设置一个网格容器，内部的子元素采用网格的方式进行布局。
fr单位：css自适应单位；在grid布局中如果一行分为四列，其中一列为固定width：100px，其他列都为1fr，那么1fr=（100% - 100px）/ 3。
单元格：行和列形成的区域，类似表格的单元格。
网格线：划分单元格的线，类似表格单元格之间的线。
属性：（以下属性都设置在容器上）
display：grid || inline-grid //grid=>grid容器区域是一个块级元素，会独占一行；inline-grid=>grid容器区域是个行类块元素，会与其他容器并排显示
grid-template-columns：100px 1fr 1fr；//设置三列元素，第一列宽为100px，其他两列宽（100% - 100px）/ 2。如果设置了5列而实际只有三个元素也会预留位置；可以使用repeat(3,1fr)设置重复列。minmax(100px, 300px)设置宽度区间。
grid-template-row：100px 1fr；//设置行高，计算方式和列相同。
grid-auto-flow:columns || row;//默认元素按行排序渲染，设置为columns会按列排序渲染。
justify-items：start || end || center || …;//容器内的子元素在其网格内水平显示方式：靠左，靠右，居中
align-items：start || end || center || …；//容器内子元素在其网格内垂直显示方式：靠上，靠下，居中
justify-content：start || end || center || …//容器内整体子元素水平显示方式
align-content：start || end || center || … //容器内整体子元素垂直显示方式
grid-gap:10px 10px;//设置子元素之间上下左右的距离，不包含和父元素的距离