1.首先設(shè)置網(wǎng)格的父級(jí)元素
display：grid
2.網(wǎng)格列寬設(shè)置
grid-template-colums:100px 10px 100px 10px 100px;
表示第1列100px藕溅，第2列10px(此列可作為列與列之間的間隙)
3.網(wǎng)格高度設(shè)置
grid-template-rows:auto 10px auto 10px;
表示第1行高度自適應(yīng)內(nèi)容乘碑，第2行10px(此列可作為列與列之間的間隙)
4.代碼實(shí)現(xiàn)
<style>
/*網(wǎng)格列寬設(shè)置*/
/*grid-template-colums:100px 10px 100px 10px 100px;*/
/*網(wǎng)格高度設(shè)置*/
/*grid-template-rows:auto 10px auto 10px;*/
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
line-height: 60px;
text-align: center;
}
.b,.d,.f,.g,.h,.i,.j,.l,.n{
background-color: #1D8FEE;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b"></div>
<div class="box c">C</div>
<div class="box d"></div>
<div class="box e">E</div>
<div class="box f"></div>
<div class="box g"></div>
<div class="box h"></div>
<div class="box i"></div>
<div class="box j"></div>
<div class="box k">K</div>
<div class="box l"></div>
<div class="box m">M</div>
<div class="box n"></div>
<div class="box o">O</div>
</div>
</style>
效果如圖：
1520911670(1).png
5.也可直接設(shè)置網(wǎng)格位置
上圖中A字母的網(wǎng)格位置為：
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
O字母的網(wǎng)格位置為：
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
因此若要將兩個(gè)字母位置互換，可直接定義其網(wǎng)格線(xiàn)的位置。
6. 網(wǎng)格位置縮寫(xiě)
上上圖中A字母的網(wǎng)格位置為：
grid-column: 1 / 2;
grid-row: 1 / 2;
還可進(jìn)一步縮寫(xiě)為：
如O字母的網(wǎng)格位置為：
grid-area: 3/5/4/6;
分別是 行起始位置/列起始位置/行結(jié)束位置/列結(jié)束位置
