CSS中 关于Grid 布局

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。话不多说看如下实例

<div class="container">
　　<div class="item item1">1</div>
　　<div class="item item2">2</div>
　　<div class="item item3">3</div>
　　<div class="item item4">4</div>
　　<div class="item item5">5</div>
　　<div class="item item6">6</div>
</div>

.container>div{
　　border:1px solid red;
}

.container{
　　display: grid;
　　grid-template-columns: 100px 100px 100px;
　　grid-template-rows: 50px 50px;
}

-----------------------------------------------------------------------------------------------------------

.container{
　　display: grid;
　　grid-template-columns: 100px 100px 100px;/*三列 每列宽100px*/
　　grid-template-rows: 50px 50px;/*两行 每行高50px*/
}
.container .item1{
　　grid-column-start: 1;
　　grid-column-end: 4;
}

-------------------------------------------------------------------------------------------------------------

.container{
　　display: grid;
　　grid-template-columns: 100px 100px 100px;
　　grid-template-rows: 100px 100px 100px;
}
.container .item1{
　　grid-column-start: 1; /*从列开始数3*3的格子都是4根线的 就是竖着数1-3占格*/
　　grid-column-end: 3;
}
.container .item3{
　　grid-row-start: 2;/*从行开始数 从2开始占格到第四根线结束*/
　　grid-row-end: 4;
}
.container .item4{
　　grid-column-start: 2;/*从列开始数从2开始到4占格*/
　　grid-column-end: 4;
}

-------------------------------------------------------------------------------------------------------------

.container{
　　display: grid;
　　grid-template-columns: 100px 100px 100px;
　　grid-template-rows: 100px 100px 100px;
　　grid-row-gap:20px;
　　grid-column-gap: 5px;/*% px em都可以 grid-gap: 2rem; 如果只设置一个值表示行和列都可以*/
}