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

}