一、使用
.grid{
display: grid
}
.grid{
display: inline-grid
}
二、容器划分
定义横、纵网格轨道。
<style>
.grid {
display: grid;
grid-template-columns: 60px 60px 60px 60px;
grid-template-rows: 60px 60px 60px 60px;
grid-gap: 5px;//grid项目之间的间距
}
.grid > div {
background: grey;
}
</style>
<div class="grid">
<div></div> <div></div> <div></div> <div></div>
<div></div> <div></div> <div></div> <div></div>
<div></div> <div></div> <div></div> <div></div>
<div></div> <div></div> <div></div> <div></div>
</div>
grid-column:(红色数字网格线)
grid-column-start | grid-column-end:从左到右由1开始,从右到左由-1开始
grid-row:(蓝色色数字网格线)
grid-row-start | grid-row-end:从上到下由1开始,从下到上由-1开始
例子如下(有五种写法):
<style>
.grid {
display: grid;
grid-template-columns: 60px 60px 60px 60px;
grid-template-rows: 60px 60px 60px 60px;
grid-gap: 5px;
}
.grid > div {
background: grey;
display: flex;
color: #fff;
font-size: 150%;
justify-content: center;
align-items: center;
}
.item1 {
grid-column-start: 4;
grid-row-start: 2;
}
.item2 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.item3 {
grid-column: -1 / -2;
grid-row: 1 / 2;
}
.item4 {
grid-column: 1 / span 2;
grid-row: -1 / -3;
}
.item5 {
grid-area: -1 / 3 / -3 / 4;
}
.item6 {
grid-area: -1 / 5 / -3 / 4;
}
</style>
<div class="grid">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>