grid网格布局
兼容性：ie10及以上浏览器支持；
容器常用属性设置
display:grid | inline-grid; 设置元素为网格容器，或是行内网格容器
grid-template-columns:[c1] 200px [c2] 200px [c3];设置网格的列数及宽度，常用设置有repeat(2,200px),宽度可以使用百分比，fr1,auto-fill,auto,minmax(100px, 1fr),px定义；c1-c3为网格线名称，通过网格线名称可以随意移动网格位置
grid-template-rows:200px 200px; 设置网格的行数几行高；常用设置同上
grid-auto-flow:row(默认) | row-dense | column | column-dese;网格的排列顺序
grid-template-areas：'a b c' 'd e f';网格区域,可以使用.占位符描述不需要区域，区域的网格线表示为a-start,a-end；
grid-gap:10px 10px;grid-column-gap和grid-row-gap的简写，设置网格间隙
justify-content:center | start | end | space-between | space-around |space-evenly | stretch（默认）； 网格相对于容器水平居中
align-content:网格相对于容器垂直居中
place-content:center; 网格布局的简写
justify-items:center | start | end | stretch（默认）； 网格相对于容器水平居中
align-items:网格相对于容器垂直居中
place-items:center; 网格布局的简写
设置网格的排列及顺序
gride-area:name || row-start / column-start / row-end / column-end ；制定网格放在哪一个网格区域；位置固定不变，如果其他单一个也设置在这个区域，会被覆盖；
grid-column-start:2;设定网格开始的网格线位置,还可以使用网格线的名称，还可以使用span 2，表示跨越两个单元格
grid-column-end:4;设定网格结束的网格线位置
grid-row-start:2;设定网格开始的网格线位置
grid-row-end:4;设定网格结束的网格线位置
以上可以使用简写属性：grid-column:start / end；grid-row:start / end;也可以写成grid-row:1 / span 2;表示占据两个单元格
网格项常用属性设置
grid-column-start name/number/auto 行开始网格线
grid-column-end name/number/auto 行结束网格线
grid-row-start name/number/auto 列开始网格线
grid-row-end name/number/auto 列开始网格线
grid-area name 命名模板名称
justify-self:start | end | center | stretch 左对齐、右对齐、左右居中、填充
align-self:start | end | center | stretch 上对齐、下对齐、上下居中、填充
其实跟flex布局属性设置类似，个人感觉他的item项属性不好用
下面是常用设置代码，一起学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>grid网格布局</title>
<style>
h3,
p{
width: 90%;
margin:20px auto;
}
.box{
display:grid;
grid-template-columns: repeat(3,20%); /*控制列数，列宽度可以单个列出，也可以使用repeat()函数，宽度可以是百分比，也可以是fr,auto等*/
/* grid-template-columns: 200px 200px 200px; */
/* grid-template-columns: repeat(3,fr1); */
/* grid-template-columns:200px auto 200px; */
grid-template-rows: repeat(2,100px);
justify-content: center; /*水平居中 */
align-content:center; /*垂直居中 */
/* place-content: center; 水平，垂直简写*/
grid-gap:15px; /*item之间间隙,grid-gap:grid-column-gap grid-row-gap*/
grid-template-areas: 'header header header' 'main main main ';
width:1000px;
height:500px;
background: #ddd;
margin:30px auto;
}
.flow{
grid-template-columns: repeat(2,20%);
grid-template-rows: repeat(3,100px);
grid-auto-flow:column; /*改变排列顺序，默认row,常用设置：row | column | row-dense | column-dense */
}
.box div{
background: orange;
text-align: center;
}
.wrap{
display: grid;
grid-template-columns: repeat(3,200px);
grid-template-rows: repeat(3,200px);
grid-template-areas: 'a b c'
'd e f'
'h i j';
width:600px;
height:600px;
margin:20px auto;
}
.wrap div{
text-align: center;
line-height: 200px;
font-size:30px;
font-weight: bold;
}
.wrap div:nth-child(1){
background: cornflowerblue;
grid-area:e;
}
.wrap div:nth-child(2){
background: rgb(245, 214, 39);
grid-column: 1 / 3;
/* grid-row:1 / 3; 如果这样设置的话，会覆盖第一项，因为第一项的位置是固定不变的 */
}
.wrap div:nth-child(3){
background: rgb(20, 206, 66);
}
.wrap div:nth-child(4){
background: rgb(236, 15, 144);
}
.wrap div:nth-child(5){
background: rgb(240, 62, 8);
}
.wrap div:nth-child(6){
background: rgb(6, 71, 190);
}
.wrap div:nth-child(7){
background: rgb(252, 99, 201);
}
.wrap div:nth-child(8){
background: rgb(196, 237, 100);
}
.wrap div:nth-child(9){
background: rgb(231, 170, 129);
grid-area: 4 /1 /4 /4;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="box flow">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
