<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div
html,body {
height: 100%;
}
.grid {
height: 100%;
display: grid; /* 网格布局 */
/* 整体水平垂直居中 */
justify-content: center;
align-content: center;
/* 定义6栏3行 */
grid-template-columns: 140px 140px 140px 140px 140px 140px;
grid-template-rows: 140px 140px 140px;
/* 定义item之间的间距为20px */
grid-gap: 20px;
background: #efefef;
}
.item{
background: #ccc;
}
.item:nth-child(1),
.item:nth-child(5) {
grid-column: 1 / 3; /* 起始于1,结束于3 */
}
.item:nth-child(2) {
grid-column: 3 / 5; /* column起始于3,结束于5 */
grid-row: 1 / 3; /* row起始于1,结束于3 */
}
.item:nth-child(7) {
grid-column: 6;
grid-row: 2 / 4; /* row起始于2,结束于4 */
}
.item:nth-child(9) {
grid-column: 2 / 4; /* column起始于2,结束于4 */
}
目前由于兼容问题暂时不建议在生产环境中使用,不过我们相信很快就可以见识到 grid 布局的强大威力了。