.wrapper {
display: grid; /*通过display属性设置属性值为grid,网格容器中的所有子元素就会自动变成网格项目（grid item）*/
grid-template-columns: repeat(3, 1fr); /*该属性可连续创建的网格轨道，repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨 道的尺寸。*/
grid-gap: 10px; /*创建网格之间的间隙*/
grid-auto-rows: minmax(100px, auto); /*创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨 } 道的最大值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压。*/
.one {
grid-column: 1 / 3; /*网格的开始和结束线，如果只提供一个值，则指定了grid-row-start(grid-column-start)值；如果提供两个值，第一个值是grid-row-start (grid-column-start)的值，第二个值是grid-row-end(grid-column-end)的值，两者之间必须要用/隔开,而start和end通过网格线可以定位网格项 目。网格线实际上是代表线的开始、结束，两者之间就是网格列或行。每条线是从网格轨道开始，网格的网格线从1开始，每条网格线逐 grid-row: 1; 步增加1，后面的two three four也是一样的道理。
}
.two {
grid-column: 2 / 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;
}