CSS3之新特性：grid栅格布局的使用方法(真正的row和column都自己控制)

CSS3之grid栅格布局(行列同时控制)的布局效果： 

 

<div class="container">
    <div class="first">第一区域</div>
    <div>第二区域</div>
    <div class="three">第三区域</div>
    <div class="four">第四区域</div>
    <div >第五区域</div>
    <div >第六区域</div>
    <div>第七区域</div>
</div>

// grid-template是控制父元素的属性(多少行，多少列)
// grid-row 和 grid-column 是控制项目(子元素)的跨度
// 比如：三行(1、2、3、4)那么一共有4个位置【grid-row:1 / 3 就是把行的第一格和第二格全部占了】
// 比如有四列(1、2、3、4、5)那么一共有5个位置【grid-column:2 / 5 就是把列的第二格和第四格全部占了】


.container {
  height: 800px;
  border: 1px solid black;
  display: grid;

  grid-template-rows: 20% 60% 20%;
  grid-template-columns: 20% 60% 20%;

  .first, .three{
    background: gray;
  }

  .four {
    background: darkgreen;
    grid-column: 1 / 4;
  }

}