grid栅格布局的使用方法(真正的row和column都自己控制)

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

  }

}