<<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>gridlay</title>
<link rel="stylesheet" href="gid.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>
.wrapper {/*wrapper对在所有在这个区间的单位起作用*/
display: grid;
grid-template-columns: repeat(3, 1fr);/*表示区间内列表重复的片段允许大量表现出以更紧凑的形式被写入的重复图案的列或行的。*/
grid-gap: 10px;/*方块之间的间距*/
grid-auto-rows: minmax(100px, auto);/*定义方块大小*/
}
.one {/*定义该表格的属性*/
grid-column: 1 / 3;/*表示占用1/3个屏幕百分比*/
grid-row: 1;/*表示指定的隐含创建的网格行的轨道的大小*/
background-color: blue;/*背景色*/
}
.two { /*定义该表格的属性*/
grid-column: 2 / 4;/*表示的隐含创建的网格列的大小轨道*/
grid-row: 1 / 3;/*表示指定的隐含创建的网格行的轨道的大小*/
background-color: blueviolet;/*背景色*/
}
.three {/*定义该表格的属性*/
grid-column: 1;/*表示的隐含创建的网格列的大小轨道*/
grid-row: 2 / 5;/*表示指定的隐含创建的网格行的轨道的大小*/
background-color: rgb(0, 255, 149);/*背景色*/
}
.four {/*定义该表格的属性*/
grid-column: 3;/*表示的隐含创建的网格列的大小轨道*/
grid-row: 3;/*表示指定的隐含创建的网格行的轨道的大小*/
background-color: rgb(55, 0, 255);/*背景色*/
}
.five {/*定义该表格的属性*/
grid-column: 2;/*表示的隐含创建的网格列的大小轨道*/
grid-row: 4;/*表示指定的隐含创建的网格行的轨道的大小*/
background-color: rgba(0, 0, 255, 0.171);/*背景色*/
}
.six {/*定义该表格的属性*/
grid-column: 3;/*表示的隐含创建的网格列的大小轨道*/
grid-row: 4;/*表示指定的隐含创建的网格行的轨道的大小*/
background-color: rgb(30, 255, 0);/*背景色*/
}