一、基本使用 display：grid；
display：grid；用于将一个盒子设置为网格布局的盒子，当不设置网格布局的其他属性时，和普通的元素没有区别。
.box {
width: 500px;
height: 500px;
display: grid;
border: 1px solid red;
}
二、网格分块，grid-template-columns用于给网格划分列块，grid-template-rows用于给表格划分行块,grid-template-area划分网格(可划分网格具体块)
1. grid-template-columns的基本使用。
grid-template-columns用于给设定的网格布局的盒子划分列块数。除属性值为repeat外，属性值有多少个网格就被划分为多少列，其中属性值可以的单位包含css的所有支持的单位（px，rem等）和新增的单位fr（代表划分份数）。 2. grid-template-row的用法和grid-template-columns一样，只是grid-template-row只是用来划分行的，一般情况两个会结合在一起使用。
下面是一个3*3范围的网格（其中网格的线只是为了方便理解画的边框线）
3. 网格分块，使用grid-template-areas；
grid-template-areas可以给需要划分的网格块进行命名，属性值为每个块自定义的名称，每一块的名称可以相同（相同的名称块用于后续的网格块的合并）。
- 画一个只有三列行默认的网格可以用： grid-template-areas: "a b c"；行自动分配。
- 画一个两行三列的网格可以用：grid-template-areas: "a b c" "e f g"（每一个引号代表一行，引号内用空格隔开代表列）;
4. 网格间距的调整row-gap（行间距调整）、column-gap（列间距调整）、简写gap（列间距/行间距）
三、设置子元素在网格中的位置
1.通过网格线设置子元素在网格中的位置。
网格线是浏览器在解析css时所画的线条，线条实际不显示，但是浏览器会按照所设置的表格的行和列去解析出所需要的线条，比如设置一个3*3的表格是由4条竖线和四条竖线和四条横线画出的。浏览器的内部会给按照从左到右，从上到下，从1开始给线条命名1，2，3，4,...
设置子元素在网格位置的css属性有四个
//用于设置列所在的位置
grid-column-start:开始列的位置;
grid-column-end: 结束列的位置;
//简写
grid-column：开始列的位置/结束列位置；
//用于设置行所在的位置
grid-row-start: 开始列的行位置;
grid-row-end: 结束行的位置;
//简写
grid-row:开始行的位置/结束行的位置;
//简写全部
grid-area: grid-row-start /grid-column-start / grid-row-end / grid-column-end;
下面是一个3*3的网格共有五个子元素，第一个元素占据左上角四格，最后一个元素占据最下面后两格。
2.通过给子元素设置grid-area的另外一种值，实现其在网格布局中的位置
使用这种值，父元素必须使用grid-template-areas进行网格划分，且要合并的网格命名必须相同。
当前内容为自学分享，如有发现错误，还请指正，感谢！
