CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中，被称为**CSS Grid Layout Module。
现阶段网页布局不再是传统方式，使用float或者是position实现各种页面布局，大家也在追求新的，更加简单，更加灵活的布局方法，除去之前火的一塌糊涂的响应式框架，大家更应该关注两种新的布局写法：1、display-flex（弹性盒子）2、grid（网格）。
flex布局的话大家可以去看阮一峰写的《Flex 布局教程：语法篇》、《Flex 布局教程：实例篇》，写的非常详细，通熟易懂。

什么是CSS Grid?

CSS Grid Layout是CSS为布局新增的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。
就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。

CSS Grid兼容性

caniuse查询结果

基本概念

1、网格线
网格线组成了网格，是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。

网格线

2、网格轨道
网格轨道是就是相邻两条网格线之间的空间，就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小，用来控制宽度或高度。

网格轨道

3、网格单元格
网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。

网格单元格

4、网格区域
网格区域是由任意四条网格线组成的空间，所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。

网格区域

5、网格容器
通过使用display属性给元素显式设置了属性值grid或inline-grid，此时这个元素将自动变成网格容器。这个类似于flexbox一样，将元素设置设置为display:flex，元素将自动变成弹性盒模型。
6、网格单元格顺序
跟flex布局一样，通过order属性来对网格单父元格进行顺序重排。

定义网格

父元素设置display:grid;或者是display:inline-grid;即可

基于网格线的占位区

网格中的单元格是由网格线划分出来的，那么我们就可以灵活的使用网格线来划分出我们需要的单元格；
网格布局中，网格线有两种：一种是行线，一种是列线，对应的每个单元格都有列线起始线（grid-column-start），列线终止线（grid-column-end），行线起始线（grid-row-start），行线终止线（grid-row-end）。
代码如下：

  <div class="container">
        <div class="box a">a</div>
        <div class="box b">b</div>
        <div class="box c">c</div>
        <div class="box d">d</div>
        <div class="box e">e</div>
        <div class="box f">f</div>
        <div class="box g">g</div>
        <div class="box h">h</div>
        <div class="box i">i</div>
        <div class="box j">j</div>
    </div>

css代码如下：

  .a{ 
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    }

显示如下：

Paste_Image.png

这种方式可以让元素显示在任意的位置，比如让a和f对调一下位置

  .a {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
    }
.f {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

效果如下：

Paste_Image.png

比之前我们写代码既节省时间，逻辑又十分简单。

觉得上述写法比价复杂的话，可以用简写的方式进行书写：
代码如下：

        .a {
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }
        
        .b {
            grid-column: 3 / 4;
            grid-row: 1 / 2;
        }
        
        .c {
            grid-column: 5 / 6;
            grid-row: 1 / 2;
        }
        
        .d {
            grid-column: 7 / 8;
            grid-row: 1 / 2;
        }
        
        .e {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }
        
        .f {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }
        
        .g {
            grid-column: 5 / 6;
            grid-row: 3 / 4;
        }
        
        .h {
            grid-column: 7 / 8;
            grid-row: 3 / 4;
        }
        
        .i {
            grid-column: 1 / 2;
            grid-row: 5 / 6;
        }
        
        .j {
            grid-column: 3 / 4;
            grid-row: 5 / 6;
        }

有没有更简单的写法呢？
有，还记得网格区域吗？一个单元格也是一个简单的网格区域，网格区域也是由四条网格线组成,顺序是row-start / column-start / row-end / column-end 。
那么上面的代码我们又可以简写成：

        .a {
            grid-area: 1 / 1 / 2 / 2;
        }
        
        .b {
            grid-area: 1 / 3 / 2 /4;
        }
        
        .c {
            grid-area: 1 / 5 / 2 / 6;
        }
        
        .d {
            grid-area: 1 / 7 / 2 / 8;
        }
        
        .e {
            grid-area: 3 / 1 / 4 / 2;
        }
        
        .f {
            grid-area: 3 / 3 / 4 / 4;
        }
        
        .g {
            grid-area: 3 / 5 / 4 / 6;
        }
        
        .h {
            grid-area: 3 / 7 / 4 / 8;
        }
        
        .i {
            grid-area: 5 / 1 / 6 / 2;
        }
        
        .j {
            grid-area: 5 / 3 / 6 / 4;
        }

合并单元格

下面是一个简单的布局页面：

Paste_Image.png

用上面的方式我们可以这样写：

         .a {
            grid-column: 1 / 6;
            grid-row: 1 / 2;
        }
        
        .b {
            grid-column: 7 / 8;
            grid-row: 1 / 10;
            background: orange;
        }
        
        .c {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }
        
        .d {
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }
        
        .e {
            grid-column: 5 / 6;
            grid-row: 3 / 4;
        }
        
        .f {
            grid-column: 1 / 4;
            grid-row: 5 / 6;
        }
        
        .g {
            grid-column: 5 / 6;
            grid-row: 5 / 6;
        }
        
        .h {
            grid-column: 1 / 2;
            grid-row: 7 / 8;
        }
        
        .i {
            grid-column: 3 / 6;
            grid-row: 7 / 8;
        }
        
        .j {
            grid-column: 1 / 6;
            grid-row: 9 / 10;
        }

效果如下图：

Paste_Image.png

除了使用网格线进行合并布局之外，我们还可以使用span这个关键字来进行合并单元格，按我的想法这个span可以理解成跨越 ，并且要记得start的位置；
例如：

       .a {
            grid-column: 1 / 6;
            grid-row: 1 / 2;
        }

如果用span这个关键字可以写成：

       .a {
            grid-column: 1 / span 5;  
            grid-row: 1 / span 1;
        }

从1开始算 跨越5个距离就是6 所以写成span 5;
另外span1 可以省略不写；
所以还可以写成：

          .a {
            grid-column: 1 / span 5;
            grid-row: 1;
        }

注意span和数组中间要留有空格；