<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置填充属性</title>
<style type="text/css">/**/
.wrapper {
display: grid;/*定义一个块状的网格容器*/
grid-template-columns: repeat(3, 1fr);/*grid-template-columns定义网格宽属性，repeat定义容器重复部分，代码中表示重复三份，fr单元允许你将网格容器中的自由空间设置为一个份数，
*/
grid-gap: 10px;/*指定网格线的大小，也可以说是网格子项之间的间距。且间隔仅仅作用在网格子项之间，不作用在容器边缘。*/
grid-auto-rows: minmax(100px, auto);/*自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。网格高最小为100*/
}
.one {
grid-column: 1 / 3;/*定义.one从网格线第一列开始到第三列结束*/
grid-row: 1;/*定义.one从网格线第一行开始到第二行结束*/
background-color: red;
}
.two {
grid-column: 2 / 4;/*定义.one从网格线第二列开始到第四列结束*/
grid-row: 1 / 3;/*定义.one从网格线第一行开始到第三行结束*/
background-color: pink;
}
.three {
grid-column: 1;/*定义.one从网格线第一列开始到第二列结束*/
grid-row: 2 / 5;/*定义.one从网格线第二行开始到第五行结束*/
background-color: blue;
}
.four {
grid-column: 3;/*定义.one从网格线第三列开始到第四列结束*/
grid-row: 3;/*定义.one从网格线第三行开始到第四行结束*/
background-color: grey;
}
.five {
grid-column: 2;/*定义.one从网格线第二列开始到第三列结束*/
grid-row: 4;/*定义.one从网格线第四行开始到第五行结束*/
background-color: yellow;
}
.six {
grid-column: 3;/*定义.one从网格线第三列开始到第四列结束*/
grid-row: 4;/*定义.one从网格线第四行开始到第五行结束*/
background-color: black;
}
</style>
</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>