生成3x3九宮格
每列寬100px，每行高100px

//絕對單位
.box{
  display:grid;
  grid-template-columns:100px 100px 100px;
   grid-template-rows:100px 100px 100px;
}
//相對單位
.box{
  display:grid;
  grid-template-columns:33.33% 33.33% 33.33%;
   grid-template-rows:33.33% 33.33% 33.33%;
}
//使用repeat函數(shù)，簡化重復(fù)書寫同樣的值
.box{
  display:grid;
  grid-template-columns: repeat(3, 33.33%);
   grid-template-rows: repeat(3, 33.33%);
}

repeat(times,value)
times為重復(fù)次數(shù)，value為需要重復(fù)的值

//定義四列，第一三列列寬為10px，二四列列寬為50px
grid-template-rows: repeat(2, 10px 50px);