grid layout

grid-template-columns:默认值为none像行一样，通过grid-template-columns指定的每个值来创建每列的列宽

fr:fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间（就像Flexbox中无单位的值）

repeat:使用repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。

.wrapper {
  display: grid;　　　　　　　　/*wrapper的显示按照grid的属性  */
  grid-template-columns: repeat(3, 1fr);　　　　/*grid-template-columns 为属性定义，定义网格   repeat为重复，其中第一个参数代表重复次数  fr为按照容器宽度计算后的基本单位*/
  grid-gap: 10px;　　　　　　　　　　　　　　　　　　　/*设置网格间隔10像素*/
  grid-auto-rows: minmax(100px, auto);　　　　　　　
}
.one {
  grid-column: 1 / 3;        /*定义one占据范围为左到距右边界三分之一处*/
  grid-row: 1;　　　　　　　　　　　/*定义长度为默认长度*/
}
.two { 
  grid-column: 2 / 4;　　　　　　/*定义two占据左半边*/
  grid-row: 1 / 3;　　　　　　　　/*定义其长度为默认两倍*/
}
.three {
  grid-column: 1;　　　　　　/*定义其长度为下一个网格的一倍*/
  grid-row: 2 / 5;　　　　　　/*定义长度为下一网格的5/2倍*/
}
.four {
  grid-column: 3;　　　　　　　　/*定义长度为该网格的第几部分*/
  grid-row: 3;　　　　　　　　　　/*定义其起始位置为第三列*/
}
.five {
  grid-column: 2;　　　　　　　　　　/*定义起始位置为第二列*/
  grid-row: 4;　　　　　　　　　　　　/*定义起始位置为第四根网格线*/
}
.six {
  grid-column: 3;　　　　　　　　　　　　/*定义起始位置为第三网格线*/
  grid-row: 4;　　　　　　　　　　　　　　　/*定义起始位置为第四网格线*/
}