html部分
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="GridLayout.css">
</head>
<body>
<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>
</body>
</html>
css部分
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);/*使用repeat()可以创建重复的网格轨道。
这个适用于创建相等尺寸的网格项目和多个网格项目。
repeat()接受两个参数：
第一个参数定义网格轨道应该重复的次数，
第二个参数定义每个轨道的尺寸。
fr单位可以帮助我们创建一个弹列的网格轨道,
它代表了网格容器中可用的空间*/
grid-gap: 10px;/*grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，
如果它指定了两个值，那么第一个值是设置grid-row-gap的值，
第二个值设置grid-column-gap的值。如果只设置了一个值，
表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同*/
grid-auto-rows: minmax(100px, auto);/*minmax()函数创建网格轨道的最小或最大尺寸
minmax()函数接受两个参数：
第一个参数定义网格轨道的最小值，
第二个参数定义网格轨道的最大值。
可以接受任何长度值，也接受auto值。
auto值允许网格轨道基于内容的尺寸拉伸或挤压*/
}
.one {
grid-column: 1 / 3;/*grid-row是grid-row-start和grid-row-end的简写
grid-column是grid-column-start和grid-column-end的简写
如果只提供一个值，则指定了grid-row-start(grid-column-start)值*/
grid-row: 1;
background: red;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
background: orange;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
background: blue;
}
.four {
grid-column: 3;
grid-row: 3;
background: black;
}
.five {
grid-column: 2;
grid-row: 4;
background: purple;
}
.six {
grid-column: 3;
grid-row: 4;
background: green;
}