赞
踩
弹性布局的文章很多,但是它是解决一维布局的,面对二维就显得无力了,此时我们就需要用到网格布局。(ps:一维就是一列或者一行的布局,当你遇到九宫盒布局,此时涉及到列与行,便是二维布局了,常见于电商网站的商品展示);看这篇文章,建议你自己建个html,跟着敲一敲,更利于理解。
很多同学可能会觉得,我用浮动,定位,弹性盒模型可以实现绝大多数样式布局呀,为什么还要新学一个网格布局呢。就像你以前用jquery,为什么后来用mvvm框架呢,因为它能让我们实现起来更效率,也很利于维护。
最基本代码:(体验 gird 的第一个好处,align-items:center
垂直居中,妈妈再也不要担心我搞不定垂直居中了。)
<style> .box { width: 300px; display: grid; align-items:center; } .box>div{ background: gray; text-align: center; font-size: 24px; border: 2px solid white; } </style> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
1)更改上面的.box
里面样式:(3列和2行)
.box {
width: 300px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
grid-template-columns
是建立列。如上图,行的宽度是100px,我们写了3个100px,就是3列;是不是挺简单。grid-template-rows
是建立行。如上图,行的高度是50px,我们写了2个50px,就是2行。2)我们用fr属性,依旧只改.box
属。
.box {
width: 300px;
display: grid;
grid-template-columns: 1fr 2fr 3fr;
/*grid-template-columns: repeat(3, 1fr) 50px; 隐藏方法repeat,代表循环创建*/
/*grid-template-columns: repeat(3, 1fr) 50px; 隐藏方法minmax(100px, auto),第一个参数是最小值,第二个参数是最大值*/
grid-template-rows: 1fr 2fr;
}
看懂没,fr表示平均分配的比例,你可以打开控制台看下,columns的1,2,3元素分别是50px,100px,150px;rows也是分成1份和2份,但是它还会自动垂直居中,所以上下两端有留白。
3)来点有难度的,(在 grid(网格) 上放置 items(子元素))
重写一下dom和css,避免混乱。
<style> .box { width: 300px; display: grid; align-items:center; /* justify-items: center;*/ grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .box>div{ padding: 30px 0; background: gray; text-align: center; font-size: 24px; border: 2px solid white; } </style> <div class="box"> <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>
得到一个九宫盒,填满6个方块,另外三个空着。
先解释一个疑惑:我为什么用padding
,还用text-align: center
,我们注释掉的justify-items: center
也能实现水平居中。原因就是gird
的居中不是针对文字的,而是你这个div
,没有padding
值,背景图无法撑满,自己试试就明白了。
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
是不是有点懵,啥情况,听我娓娓道来,你会觉得原来如此。九宫盒的 grid-column是从1-9,grid-column-start表示我开始的地方是第1个盒子,grid-column-end表示我结束地方是第4个盒子(其实是第4个盒子之前结束),所以其实是1-3是item1占领的,后面的自动往后顺延。自己试试改一改属性就明白了。
只改.box样式
.box {
width: 300px;
display: grid;
align-items:center;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
不贴图了, 你会发现,网格项之间添加一个间隙。有多好用,之前加空隙,用margin你会特无语,很难处理,这个就so easy。grid-column-gap和grid-row-gap分别改变列与行网格间隙。
只改.box样式
<style> .box { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f"; } .header { grid-area: h; background: greenyellow; } .menu { grid-area: m; background: blue; } .content { grid-area: c; background: coral; } .footer { grid-area: f; background: purple; } .box>div{ font-size: 24px; text-align: center; } </style> <div class="box"> <div class="header">header</div> <div class="menu">menu</div> <div class="content">content</div> <div class="footer">footer</div> </div>
这里唯一新属性就是grid-template-areas,咋一看,有点晕。仔细说来:
grid-template-columns: repeat(12, 1fr);
先在列上面制作12栅格系统。grid-template-rows: 50px 350px 50px;
再制作三行,高度不同。形成3*12 = 36个单元格。grid-template-areas
将这36个单元格平分,就是打标。h代表header、m代表menu、c代表content、f代表footer。看上述写的正好平分了36份,然后我们在子样式grid-area
对应找到属于自己的标签。其实还是不难理解的。延伸:我们配合响应式多媒体查询@media screen
能实现各种之前很难实现的效果。gird真正做到了结构和表现分离,是css时代的一大进步。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。