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; 如果只设置一个值表示行和列都可以*/ }

 

转载于:https://www.cnblogs.com/maochunhong/p/10607139.html