grid

.wrapper {
  display: grid;/*通过display属性设置属性值为grid可以创建一个网格容器。*/
  grid-template-columns: repeat(3, 1fr);/*repeat()来创建三列，而且每列的列宽是1fr（1fr = 网格宽度 / 3）
  grid-gap: 10px;/*行和列的间距相等为10px*/
  grid-auto-rows: minmax(100px, auto);/*第一行的高度最小值是100px，但其最大值为auto*/
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;/*供一个值，则指定了grid-row-start值*/

} .two { grid-column: 2 / 4; grid-row: 1 / 3;
　　　　/*==
　　　　grid-column-start: 2;
　　　　grid-column-end: 4; 
　　　　grid-row-start: 1; 
　　　　grid-row-end: 3;
　　　　//
　　　　grid-area: 2/4/1/3;
　　　　*/
　　　　}
.three {
  grid-column: 1;/*供一个值，则指定了grid-column-start值*/
  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;

}