.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>
原文：https://www.cnblogs.com/cmymm/p/9746434.html