css3之grid

.grid-style{
  
   display:grid;
   grid-template-columns: 1fr 1fr; //创建了两列的网格
   grid-column-gap:1px; //设置每列之间的间距
   grid-row-gap:1px; //设置行之间的间距
   
   grid-template-columns:3fr 1fr 1fr; //第一列占三个网格
   grid-template-rows:1fr 3fr; //第一行占1个网格第二行占3个网格
   

 //响应时布局
   @media screen and (min-width: 500px) {
      grid-template-columns: 1fr 1fr 1fr;
   }

  @media screen and (min-width: 800px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
   }
}