9.24

Posted 2021-01-08 jinqyuh

.wrapper {                              包装器                           
   display: grid;                        显示网格
   grid-template-columns: repeat(3, 1fr);             设置网络模板列，重复（3,1fr）
   grid-gap: 10px;                 间隙为10px
   grid-auto-rows: minmax(100px, auto);                    网络自动行最小最大为（100px，auto）
}
.one {                                     一

   grid-column: 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;
}