3rd week blog2（代码注释）

Posted 2021-01-08 shengbowen1004

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