关于CSS/Grid Layout实例的理解

代码实例来自网络

.wrapper {
  display: grid;//创建一个网格容器，所有容器子结点自动成为容器项目
  grid-template-columns: repeat(3, 1fr);//创建重复的网格轨道，第一个参数定义网格轨道重复的次数为3，每个列宽为1fr
  grid-gap: 10px;//属性grid-gap是grid-row-gap和grid-column-gap的简写形式。行间隙和列间隙都是10px
  grid-auto-rows: minmax(100px, auto);//定义了隐式网格的行轨道的大小，最小值为100px,最大值为自动。
}
.one {
  grid-column: 1 / 3;//grid-column是grid-column-start和grid-column-end的简写，这里指定了grid-column-start为1/3
  grid-row: 1;//同上，指定grid-row-start为1
}
.two { 
  grid-column: 2 / 4;//指定grid-column-start为2/4
  grid-row: 1 / 3;//指定grid-row-start为1 / 3
}
.three {
  grid-column: 1;//指定grid-column-start为1
  grid-row: 2 / 5;//指定grid-row-start为2 / 5
}
.four {
  grid-column: 3;//指定grid-column-start为3
  grid-row: 3;//指定grid-row-start为3
}
.five {
  grid-column: 2;//指定grid-column-start为2
  grid-row: 4;//指定grid-row-start为4
}
.six {
  grid-column: 3;//指定grid-column-start为3
  grid-row: 4;//指定grid-row-start为4
}