摘要：grid布局簡介：Grid布局是將容器劃分成“行”和“列”，產生單元格，然后指定“項目所在”的單元格，可以看作是二維布局，設置 css的 display:grid 或 display:inline-gri...
grid布局簡介：
Grid布局是將容器劃分成“行”和“列”，產生單元格，然后指定“項目所在”的單元格，可以看作是二維布局，設置 css的 display:grid 或 display:inline-grid ,都可以將直接將容器能產生單元格的容器。
基本概念：
容器（container）——有容器屬性
項目（items）——有項目屬性
行（row)
列（column）
間距（gap) ——單元格之間的距離
區域（area）—— 自己劃分每個單元格占據的區域
內容（content)
容器屬性：
grid-template-rows 設置每一行的寬度，可以是具體值，也可以百分比，也可以是auto
grid-template-columns 設置每一列的寬度，可以是具體值，也可以百分比，也可以是auto
.box {
width:500px;
height:480px;
border:1px solid #000;
display:grid;
grid-template-rows:10% auto 20%;
grid-template-columns:100px auto 100px;
margin:0 auto;
margin-top:10px;
color:white;
font-size:30px;
}
.div1 {
background:red;
}
.div2 {
background:green;
}
.div3 {
background:yellow;
}
.div4 {
background:blue;
}
.div5 {
background:palegreen;
}
.div6 {
background:plum;
}
.div7 {
background:peru;
}
.div8 {
background:yellowgreen;
}
.div9 {
background:powderblue;
}
.div10 {
background:palevioletred;
}<div class="box"> <div class="div1">1</div> <div class="div2">222222222222</div> <div class="div3">3</div> <div class="div4">4</div> <div class="div5">5</div> <div class="div6">6</div> <div class="div7">7</div> <div class="div8">8</div> <div class="div9">9</div> <div class="div10">10</div> </div>
結果如圖所示，雖然設置的是三行三列，但是如果html多出來的div10，會直接換行顯示，并且高度塞滿容器：
repeat屬性：
相當于重復的簡寫，第一個參數是次數，第二個是重復的值。
grid-template-rows:repeat(3,100px); grid-template-columns:repeat(3,150px);
auto-fill屬性：
有時候單元格的數量是不固定的，大小是固定的，需要自動填充容器，就可以用auto-fill屬性。
.box{
width:500px;
height:480px;
border:1px solid #000;
display:grid;
grid-template-rows:repeat(3,100px);
grid-template-columns:repeat(auto-fill,60px);
margin:0 auto;
margin-top:10px;
color:white;
font-size:30px;
}
fr屬性：
fr屬性可以平分比例，但是和百分比不一樣，百分比不算gap空間，fr是算上的。
.box{
width:500px;
height:480px;
border:1px solid #000;
display:grid;
grid-template-rows:1fr 1fr 1fr 1fr;
grid-template-columns:repeat(4,1fr);
margin:0 auto;
margin-top:10px;
color:white;
font-size:30px;
}如圖所示，行平分了四行，列沒有被平分，是因為第二列的內容超出了平分的比例，就會多出去，相應的另外三列就會同比例的減小：
minmax函數：
minmax函數產生一個長度范圍，表示長度就在這個范圍之中，它接受兩個參數，分別為最小值和最大值。
.box{
width:500px;
height:480px;
border:1px solid #000;
display:grid;
grid-template-rows:1fr 1fr 1fr 1fr;
grid-template-columns:150px 150px 150px minmax(10px,100px);
margin:0 auto;
margin-top:10px;
color:white;
font-size:30px;
}如圖所示，前三列都是150px,容器的寬度是500px，第四列是50px,在minmax(10px,100px)區間中
row-gap和column-gap
格子之間的間距row-gap表示行與行之間的間距、column-gap表示列與列之間的間距。
.box{
width:500px;
height:480px;
border:1px solid #000;
display:grid;
grid-template-rows:1fr 1fr 1fr 1fr;
grid-template-columns:150px 150px 150px minmax(10px,100px);
column-gap:10px;
row-gap:30px;
margin:0 auto;
margin-top:10px;
color:white;
font-size:30px;
}如圖所示，如果row-gap和column-gap的值一樣，例如都是10px,可以簡寫成gap:10px，如果不一樣，可以簡寫成gap:30px 10px,30px代表row行間距，10px代表column列間距。
grid-auto-flow
網格的排放順序，默認是row,先行后列，可以設置column,就是先列后行。
.box{
width:500px;
height:480px;
border:1px solid #000;
display:grid;
grid-template-rows:100px 100px 100px;
grid-template-columns:120px 120px 120px;
column-gap:10px;
row-gap:30px;
margin:0 auto;
margin-top:10px;
color:white;
font-size:30px;
}如圖所示，設置按照column排序，就會先列后行排序：
有時有些格子大的情況下，會讓容器有些地方空出來，占不滿容器，空間利用率不高：
.box{
width:500px;
height:480px;
border:1px solid #000;
display:grid;
grid-template-rows:100px 100px 100px;
grid-template-columns:150px 150px 150px;
column-gap:10px;
row-gap:30px;
grid-auto-flow:row;
margin:0 auto;
margin-top:10px;
color:white;
font-size:30px;
}
.div1{
grid-column-start:1;
grid-column-end:3;
background:red;
}
.div2{
grid-column-start:1;
grid-column-end:3;
background:green;
}如下圖所示，使用grid-auto-flow:row,先行后列排序，由于第一和第二個格子大了，導致第一和第二個格子之間有空間：
如果想提高空間利用率的話，可以設置dense來提高空間利用率：grid-auto-flow:row dense;
.box{
width:500px;
height:480px;
border:1px solid #000;
display:grid;
grid-template-rows:100px 100px 100px;
grid-template-columns:150px 150px 150px;
column-gap:10px;
row-gap:30px;
grid-auto-flow:row dense;
margin:0 auto;
margin-top:10px;
color:white;
font-size:30px;
}如下圖所示：設置dense之后，將第一個格子和第二個格子之間的空間占滿。
