grid網(wǎng)格布局
兼容性：ie10及以上瀏覽器支持；
容器常用屬性設(shè)置
display:grid | inline-grid; 設(shè)置元素為網(wǎng)格容器，或是行內(nèi)網(wǎng)格容器
grid-template-columns:[c1] 200px [c2] 200px [c3];設(shè)置網(wǎng)格的列數(shù)及寬度，常用設(shè)置有repeat(2,200px),寬度可以使用百分比，fr1,auto-fill,auto,minmax(100px, 1fr),px定義；c1-c3為網(wǎng)格線名稱，通過網(wǎng)格線名稱可以隨意移動(dòng)網(wǎng)格位置
grid-template-rows:200px 200px; 設(shè)置網(wǎng)格的行數(shù)幾行高；常用設(shè)置同上
grid-auto-flow:row(默認(rèn)) | row-dense | column | column-dese;網(wǎng)格的排列順序
grid-template-areas：'a b c' 'd e f';網(wǎng)格區(qū)域,可以使用.占位符描述不需要區(qū)域，區(qū)域的網(wǎng)格線表示為a-start,a-end；
grid-gap:10px 10px;grid-column-gap和grid-row-gap的簡(jiǎn)寫，設(shè)置網(wǎng)格間隙
justify-content:center | start | end | space-between | space-around |space-evenly | stretch（默認(rèn)）； 網(wǎng)格相對(duì)于容器水平居中
align-content:網(wǎng)格相對(duì)于容器垂直居中
place-content:center; 網(wǎng)格布局的簡(jiǎn)寫
justify-items:center | start | end | stretch（默認(rèn)）； 網(wǎng)格相對(duì)于容器水平居中
align-items:網(wǎng)格相對(duì)于容器垂直居中
place-items:center; 網(wǎng)格布局的簡(jiǎn)寫
設(shè)置網(wǎng)格的排列及順序
gride-area:name || row-start / column-start / row-end / column-end ；制定網(wǎng)格放在哪一個(gè)網(wǎng)格區(qū)域；位置固定不變，如果其他單一個(gè)也設(shè)置在這個(gè)區(qū)域，會(huì)被覆蓋；
grid-column-start:2;設(shè)定網(wǎng)格開始的網(wǎng)格線位置,還可以使用網(wǎng)格線的名稱，還可以使用span 2，表示跨越兩個(gè)單元格
grid-column-end:4;設(shè)定網(wǎng)格結(jié)束的網(wǎng)格線位置
grid-row-start:2;設(shè)定網(wǎng)格開始的網(wǎng)格線位置
grid-row-end:4;設(shè)定網(wǎng)格結(jié)束的網(wǎng)格線位置
以上可以使用簡(jiǎn)寫屬性：grid-column:start / end；grid-row:start / end;也可以寫成grid-row:1 / span 2;表示占據(jù)兩個(gè)單元格
網(wǎng)格項(xiàng)常用屬性設(shè)置
grid-column-start name/number/auto 行開始網(wǎng)格線
grid-column-end name/number/auto 行結(jié)束網(wǎng)格線
grid-row-start name/number/auto 列開始網(wǎng)格線
grid-row-end name/number/auto 列開始網(wǎng)格線
grid-area name 命名模板名稱
justify-self:start | end | center | stretch 左對(duì)齊、右對(duì)齊、左右居中、填充
align-self:start | end | center | stretch 上對(duì)齊、下對(duì)齊、上下居中、填充
其實(shí)跟flex布局屬性設(shè)置類似，個(gè)人感覺他的item項(xiàng)屬性不好用
下面是常用設(shè)置代碼，一起學(xué)習(xí)
<!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網(wǎng)格布局</title>
<style>
h3,
p{
width: 90%;
margin:20px auto;
}
.box{
display:grid;
grid-template-columns: repeat(3,20%); /*控制列數(shù)，列寬度可以單個(gè)列出，也可以使用repeat()函數(shù)，寬度可以是百分比，也可以是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; 水平，垂直簡(jiǎn)寫*/
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; /*改變排列順序，默認(rèn)row,常用設(shè)置：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; 如果這樣設(shè)置的話，會(huì)覆蓋第一項(xiàng)，因?yàn)榈谝豁?xiàng)的位置是固定不變的 */
}
.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>
