display：grid布局

1. 网格列宽设置

首先设置网格的父级元素display：grid

grid-template-colums:100px 10px 100px 10px 100px;

• 1

表示第1列100px，第2列10px(此列可作为列与列之间的间隙)

2.网格高度设置

grid-template-rows:auto 10px auto 10px;

• 1

表示第1行高度自适应内容，第2行10px(此列可作为列与列之间的间隙)

3. 具体代码

<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>

     .wrapper {
            display: grid;
            grid-template-columns: 100px 10px 100px 10px 100px;
            grid-template-rows: auto 10px auto;
        }

        .box {
         .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;
        }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35

4. 效果展示

子元素会按照网格的数量一次排列。

5. 直接设置网格位置

盗图一张：

上上图中A字母的网格位置为：

 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

• 1
• 2
• 3
• 4

O字母的网格位置为：

 grid-column-start: 5;
 grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;

• 1
• 2
• 3
• 4

因此若要将两个字母位置互换，可直接定义其网格线的位置。

6. 网格位置缩写

上上图中A字母的网格位置为：

 grid-column: 1 / 2;
 grid-row: 1 / 2;

• 1
• 2

还可进一步缩写为：
如O字母的网格位置为：

  grid-area: 3/5/4/6;