grid栅格布局

一、使用

.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>