CSS 利用display：grid实现九宫格

生成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函数，简化重复书写同样的值
.box{
  display:grid;
  grid-template-columns: repeat(3, 33.33%);
   grid-template-rows: repeat(3, 33.33%);
}

repeat(times,value)
times为重复次数，value为需要重复的值

//定义四列，第一三列列宽为10px，二四列列宽为50px
grid-template-rows: repeat(2, 10px 50px);