<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>方块变化</title>
<link rel="stylesheet" href="webcss.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 {
display: grid;//////画面以网格表现
grid-template-columns: repeat(3, 1fr); //网格重复3次，均分
grid-gap: 10px;/////网格间的间距为10px
grid-auto-rows: minmax(100px, auto); /////最小100px最大到屏幕最大
}
.one {
grid-column: 1 / 3;////网格列1-3
grid-row: 1;网格横1
background: red;背景红
}
.two {
grid-column: 3 / 4;、、、、网格列3-4
grid-row: 1 / 3;、、、、、、网格横1-3
background:blue; 、、、背景蓝色
}
.three {
grid-column: 1;
grid-row: 2 / 5;
background:black;
}
.four {
grid-column: 3;
grid-row: 3;
background:cyan;
}
.five {
grid-column: 2;
grid-row: 4;
background:white;
}
.six {
grid-column: 3;
grid-row: 4;
background:yellow;
}