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;　　//只在第四行 }