1、基本的网格布局
display: grid;//准备开始要使用网格布局了

grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
//3行3列，宽度高度都为100px的网格布局
//目前使用了绝对单位

grid-template-columns: 33.33% 33.33% 33.33% ;
grid-template-rows: 33.33% 33.33% 33.33%;
//3行3列，宽度高度都为父元素的百分之33的网格布局
//目前使用了绝对单位

功能函数：repeat(参数1,参数2);
参数1: 重复的次数
参数2: 重复的宽和高

grid-template-columns: repeat(10, 10%);
grid-template-rows: repeat(10, 10%);

新单位：fr只有网格布局可以使用，代表占比

2、设置行间距 || 列间距
grid-row-gap: 20px;
grid-column-gap: 20px;
简写：grid-gap: 行间距 列间距;

3、指定区域，一个区域可能会由多个单元格组成
先为某些元素设置grid-area: 自定义名称;比如a

grid-template-areas:
"a a a"
"b b b"
"c c c"

4、规定子元素放置的顺序（默认为先排行后排列）
grid-auto-flow: row(默认值)/column;

5、设置单元格内容在单元格水平 | 垂直的对齐方式
水平：justify-items: start | end | center;//一旦设置了此属性，元素的宽度不再沾满单元格，而是由内容撑开，
//默认值stretch填满单元格
垂直：align-items: start | end | center;//一旦设置了此属性，元素的宽度不再沾满单元格，而是由内容撑开，
//默认值stretch填满单元格

简写：place-items: 垂直 水平;

6、设置整个内容区域在容器里面的水平 | 垂直 对齐方式
简写：place-content: 垂直 水平;

7、指定的四个边框，定在哪根网格线上

grid-column-start: 2;//数字2代表的是第几根网格线
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;