3rd week blog2（代码注释）

.wrapper {　　　　　　　　　　/*包装类*/
  display: grid;           /*属性：网格*/
  grid-template-columns: repeat(3, 1fr);  /*属性允许指定网格中的列数及列的宽度。repeat的作用减少重复书写。fr是一个自适应单位，用于在一系列长度值中分配剩余空间。3代表重复3次，1fr是网格容器被分成1行。*/
  grid-gap: 10px;  /*网格线和列之间的距离为10像素*/
  grid-auto-rows: minmax(100px, auto);/*创建出的行保持最小距离，为100像素。最大值是suto，它是自动定位。*/
}
.one {　　　　　　　　　　/*第一个*/
  grid-column: 1 / 3;　　/从第一条网格线开始，到第3条网格线结束*/
  grid-row: 1;   　　/*只在第一行*/
}
.two { 　　　　　　　　　　/*第二个*/
  grid-column: 2 / 4;　　/*从第二条网格线开始，到第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;　　/*只在第四行*/
}