初识grid网格布局

一个简单的Grid布局

CSS Grid 布局由两个核心组成部分：父元素（wrapper）和子元素（item）。wrapper是实际的网格，item则是里面的内容。
下面是一个简单的练习

//html部分
 <div class="wrapper">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>

要把wrapper元素变成一个grid（网格），只要简单地把其diaplay属性设置为grid即可：

CSS部分：
.wrapper{
      width: 3rem;
      margin:0 auto;
      display:grid;
      grid-template-rows: 1rem 1rem;
      grid-template-columns: 1rem 1rem 1rem;
      border:solid #ddd 0.01rem;
      div{
        &:nth-of-type(even){
          background: #1fab4b;
        }
      }
    }

正如你所看到的grid-template-columns属性被赋予三个值，这样我就能得到三列，我还想得到两行，因此grid-template-rows属性被赋予两个值，这些值的大小决定我希望列多宽及行多高。
看一下运行结果：

image.png

为了让你感受到值的大小对行高及列宽的影响，我对css代码进行了二次修改

 .wrapper{
      width: 3rem;
      margin:0 auto;
      display:grid;
      grid-template-rows: 1rem 0.5rem;
      grid-template-columns: 1.5rem 1rem 0.5rem;
      border:solid #ddd 0.01rem;
      div{
        &:nth-of-type(even){
          background: #1fab4b;
        }
      }
    }

此时的运行结果：

image.png

现在是不是觉得非常好理解，使用起来也很简单，那我们再深入一点
首先我给每个子元素添加一个class

//HTML:
 <div class="wrapper">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
      <div class="item5">5</div>
      <div class="item6">6</div>
    </div>

//css:
 .wrapper{
      width: 3rem;
      margin:0 auto;
      display:grid;
      grid-template-rows: 1rem 1rem 1rem ;
      grid-template-columns:1rem 1rem 1rem;
      border:solid #ddd 0.01rem;
      .item1{
        grid-column-start: 1;
        grid-column-end: 4;
      }
  /* .item1 {
        grid-column: 1 / 4;//简写
      }*/
      div{
        &:nth-of-type(even){
          background: #1fab4b;
        }
      }
    }

运行结果：

image.png

我们可以看到item1占据从第一条网格线开始到第四条网格线结束，换句话说它独占整行。

image.png
上面这张图红色箭头部分代表从左到右四条网格线

这是学习过程中的参考文章：http://www.css88.com/archives/8506，感谢作者分享！