CSS Grid布局入门

发布日期:2019-01-24

相信大家都比较熟悉flex布局了,最近有空研究了波grid布局,感觉虽然兼容性还不是太高,应用不是太普遍,但是功能非常强大。未来应该是grid+flex为主流,grid是二维布局,很灵活,适合整体构架,而flex是一维布局,适合处理局部细节。

介绍

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统。

兼容性目前不是太友好

和felx类似,grid有容器项目Grid容器 属性列表Grid Container 的全部属性displaygrid-template-columnsgrid-template-rowsgrid-template-areasgrid-templategrid-column-gapgrid-row-gapgrid-gapjustify-itemsalign-itemsjustify-contentalign-contentgrid-auto-columnsgrid-auto-rowsgrid-auto-flowgridGrid项目 的全部属性grid-column-startgrid-column-endgrid-row-startgrid-row-endgrid-columngrid-rowgrid-areajustify-selfalign-self被吓到了吗,反正第一次我看是被吓到了,不过没事,下面只会讲解其中常用的下面栗子均用.grid_box.grid_item分别指代容器项目,并使用以下html结构

<div > <div >1</div> <div >2</div> <div id="item3">3</div> <div id="item4">4</div> <div >5</div> <div >6</div> <div >7</div> <div >8</div> <div >9</div> <div >10</div> <div >11</div> </div> <span>邻居元素</span>

容器属性

display

grid - 生成一个块级(block-level)网格inline-grid - 生成一个行级(inline-level)网格subgrid - 如果容器本身就是一个项目,就可以使用这个属性来表示你想从它的父节点获取它的行/列的大小,而不是指定它自己的大小。

.grid_box { background: #054154 display: inline-grid //行级网络,和span处于一行 } .grid_item { background: #0490db border: 1px solid #fff }

.grid_box { background: #054154 display: grid //块级网络,将span挤入下一行 } .grid_item { background: #0490db border: 1px solid #fff }

grid-template-columns / grid-template-rows

grid-template-rows是行高

.grid_box { background: #054154 width: 500px height: 300px display: grid grid-template-rows: 60px auto 40px } .grid_item { background: #0490db border: 1px solid #fff }

代表第一行高60px,第三行高40px其他的所有行(不设置或者auto的行)平分剩余高度

grid-template-columns是列宽

.grid_box { background: #054154 width: 500px height: 300px display: grid grid-template-rows: 60px auto 40px grid-template-columns: 30px 20px auto auto } .grid_item { background: #0490db border: 1px solid #fff }

和行高类似,这个代表第一列宽30px第二列宽20px,第三列第四列平分剩余宽度(和行高不同的是列宽是你设置了多少就会有多少列,列数量和你设置的是相同的)

grid-gap

【grid-gap】默认值为0,两个属性的缩写,第一个grid-row-gap(行与行之间的间距),第二个grid-column-gap(列与列之间的间距)只设置了一个值,表示行和列的间距相等*/

.grid_box { background: #054154 width: 500px height: 300px display: grid grid-template-rows: 60px auto 40px grid-template-columns: 30px 20px repeat(21fr) grid-gap: 2px 4px //行间距2px列间距4px } .grid_item { background: #0490db border: 1px solid #fff }

一些语法糖

repeat

你可能会问如果中间有很多列/行,每个都写岂不是很麻烦,因此提供了repeat语法糖来简化写法

.grid_box { grid-template-columns: 30px 20px auto auto grid-template-columns: 30px 20px repeat(2auto)//等价于}

fr

另外,类似flex的1,grid里面也有类似的"份数单位"---fr.

.grid_box { grid-template-columns: 30px 20px auto auto grid-template-columns: 30px 20px 1fr 1fr//等价于 grid-template-columns: 30px 20px repeat(21fr)//也等价于}

minmax

最大值最小值grid-template-rows: minmax(auto 30%) 1fr 1fr表示第一行高最小auto最大30%

项目属性

grid-area

单体操作,控制个体的位置,凌驾于整体规则,4个属性分别是 grid-row-start(开始行线), grid-column-start(开始列线), grid-row-end(结束行线),grid-column-end(结束列线)比如下面用item3来单独操作

.grid_box { background: #054154 width: 500px height: 300px display: grid grid-template-rows: 60px auto 40px grid-template-columns: 30px 20px repeat(21fr) grid-gap: 2px 4px } .grid_item { background: #0490db border: 1px solid #fff } #item3{ grid-area: 1 /1/ 2/ 4 }

grid-area: 1 /1/ 2/ 4代表item3的位置是,行线1到2,列线1到4,这四条线组成的区域即是item3的位置,是不是很强大,太叼了这个

span负数

你可能会问如果中间有很多列/行,那还要去数是第几列线岂不是很麻烦,因此又有了优化和js里的slice类似,负数表示倒数而span表示合并因此本例中,以下都是等价的

#item3{ grid-area: 1 /1/ 2/ 4 grid-area: 1 /1/ 2/ span 3//等价 grid-area: 1 /1/ 2/ -2//等价 }

order

如果有两个子项目发生了重叠怎么办呢,就需要order来解决层级问题了。和index类似于z-index,表明叠放顺序,数值越大,越在上。允许负数。

.grid_box { background: #054154 width: 500px height: 300px display: grid grid-template-rows: 60px auto 40px grid-template-columns: 30px 20px repeat(21fr) grid-gap: 2px 4px } .grid_item { background: #0490db border: 1px solid #fff } #item3{ grid-area: 1 /1/ 2/ 4 order: 1 } #item4{ grid-area: 1 /1/ 2/ 4 }

因为item3有order所以item3盖住了item4

命名

在我看来,命名是grid最强大的地方,你可以在容器里面设置命名,然后在子项目里面使用该命名其中点号 . 代表一个空网格单元比如我们来个常规的布局

<div > <div id="header">header</div> <div id="aside">aside</div> <div id="content">content</div> <div id="footer">footer</div> </div> <span>邻居元素</span>

.grid_box { background: #054154 width: 500px height: 300px display: grid grid-template-rows: 60px auto 40px grid-template-columns: 30px 20px repeat(21fr) grid-gap: 2px 4px grid-template-areas: "header header header header" "aside . content content" "footer footer footer footer" } .grid_item { background: #0490db border: 1px solid #fff } #header{ grid-area: header } #aside{ grid-area: aside } #content{ grid-area: content } #footer{ grid-area: footer }

是不是很强大

另外,网络线也是可以命名的

测试

以上就是一些常用的,基础的使用方法,更深入的我们以后再来讨论如果你想检测自己是否基本掌握了grid,可以使用以下的网址测试,是个有趣的小游戏

小测试

最后

大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……个人博客:www.yangyuetao.cn小程序:TaoLand