Grid布局详解

　　什么是Grid布局?Gird为网格的意思,顾名思义就是让你的页面布局像一个网格同样,把对应的组件一个个的放到你想放入的位置里面.Grid布局的优点在于他是一个基于网格的布局系统,能够运用行与列的来设计每一个组件的位置与大小,与其它布局相对来讲可以更加的方便与灵活.

　　怎么设置为网格布局呢?很简单,只需在html里面须要先设置一个父元素(网格容器)来包括全部的子元素,设置为Grid布局只须要在其父元素中声明display:grid/inlinegird便可,此时网格容器的全部直接子节点都自动成为网格项.例如: 

HTML代码:

 1 <div class="container">
 2   <div class="item">1</div>
 3   <div class="item">2</div>
 4   <div class="item">3</div>
 5 </div>

CSS代码:

.container {
  display: grid/inline-gird;
}

(ps:值得一提的是若是设置为grid布局的话,父元素的宽度默认为全屏,高度自适应,但若是是inline-grid的话则是宽高所有自适应.除非你指定了宽高)

　grid-gap

　　可能你的界面会是这样的:　　　　　　　　　　　　　　　　　　　　　　

　　所有元素都牢牢的挤在一块儿,看起来十分的不美观,这时候你可使用 grid-gap:10px 来使每一个元素之间相距10px的间隙,以下图所示:

　　你也可使用 grid-column-gap/grid-row-gap 来分别使列与行之间的间隙.

　grid-column-start/end 与 gird-row-start/end:

　　先来看看网格线的概念,下面的Line 1分别表明了第一行/列网格线,其它Line x同上.

　

　　使用如下代码 .item1{ grid-column-start:1; grid-column-end: 3; } 能够达到如下效果:

 

 　　grid-column-start 是规定改元素的列起始基线处于哪一个网格线,grid-column-end 是规定改元素的结束基线处于哪一个网格线,这样作能够将某个元素所占的空间给增大. 而 grid-row-start/end 则上面的功能相同,只不过改变的是行而已.

　grid-template-columns/rows:

　　 grid-template-columns: 100px 200px 100px; 设置每列元素的宽度,是用改属性后明显第2列要比其它两列宽两倍.若是是 grid-template-rows: 100px 200px 100px; 的话则是改变行间的高度,大家能够本身试试.

 

一口气写无缺累,抱歉,剩下的内容后面补上