CSS Grid Layout擅长将页面划分为主要区域，或者在从HTML基元构建的控件的各个部分之间定义大小，位置和图层之间的关系。
与表格一样，网格布局使作者能够将元素对齐到列和行中。但是，CSS网格可能比使用表格更多或更容易布局。例如，网格容器的子元素可以自己定位，使它们实际重叠和分层，类似于CSS定位元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Display Test</title>
<link rel="stylesheet" href="Display_set.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文件
@charset "utf-8";
.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;
}
.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;
}