HTML部分：
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
CSS部分：
.wrapper {
display: grid;
/*display 属性规定元素应该生成的框的类型*/
grid-template-columns: repeat(3, 1fr);
/*设置网格为3列；
fr 单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，
如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配；
repeat为重复片段，允许重复大量 列 的片段*/
grid-gap: 10px;
/*设置网格间隙为10像素*/
grid-auto-rows: minmax(100px, auto);
/*定义了最小值为100像素，最大值设为自动*/
}
.one {
grid-column: 1 / 3;
/*占用列的位置，从第一到第三列*/
grid-row: 1;
/*占用行的位置*/
opacity:0.6;
/*设置透明度方便观察*/
background: #408353;
/*设置背景色便于观察*/
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
/*占用行的位置，从第一到第三行*/
opacity:0.6;
background: #543634;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
opacity:0.6;
background: #634653;
}
.four {
grid-column: 3;
grid-row: 3;
opacity:0.6;
background: #744143;
}
.five {
grid-column: 2;
grid-row: 4;
opacity:0.6;
background: #624642;
}
.six {
grid-column: 3;
grid-row: 4;
opacity:0.6;
background: #532535;
}
以上grid的代码部分，运行效果如图：
