Grid-template-columns ： 設置網格布局每一列的寬度。

repeat： 是個函數，重復之前的命令行，根據之前的重復傳入的參數來執行。

fr：長度單位。

wrapper {
  display: grid;                                  //定義一個網格
  grid-template-columns: repeat(3, 1fr);          //網格的列重復三列，寬度為1fr
  grid-gap: 10px;                                 //網格間距：10px
  grid-auto-rows: minmax(100px, auto);            //網格自動排列的行高：最大值自動分配（液態化），最小 100px
}
.one {
  grid-column: 1 / 3;                              //網格占據1-3列
  grid-row: 1;                                     //網格占據1行
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

轉自：Yangjianyu的博客
 

Grid-layout