.wrapper {
display: grid;/* 使wrapper为网格容器 */
grid-template-columns: repeat(3, 1fr);/* 画出3个轨道大小为1fr */
grid-gap: 10px;/* 设置网格线大小为10px */
grid-auto-rows: minmax(100px, auto);/* 自动划分行大小 最小100px */
}
.one {
grid-column: 1 / 3;/* 竖排距离从第1到第3个轨道 */
grid-row: 1;/* 横排距离占第1个轨道 */
}
.two {
grid-column: 2 / 4;/* 竖排距离从第2到第4个轨道 */
grid-row: 1 / 3;/* 横排距离从第1到第3个轨道 */
}
.three {
grid-column: 1;/* 竖排距离占第1个轨道 */
grid-row: 2 / 5;/* 横排距离从第2到第5个轨道 */
}
.four {
grid-column: 3;/* 竖排距离占第3个轨道 */
grid-row: 3;/* 横排距离占第3个轨道 */
}
.five {
grid-column: 2;/* 竖排距离占第2个轨道 */
grid-row: 4;/* 横排距离占第4个轨道 */
}
.six {
grid-column: 3; /* 竖排距离占第3个轨道 */
grid-row: 4;/* 横排距离占第4个轨道 */
}
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box</title>
<link rel="stylesheet" href="three.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>
</html>