首发于:https://github.com/ZongDuCha/ZD-1.0
掘金:https://juejin.im/post/5a374a905188257d38440e4b
display:gri
最近时间在了解css3 中不太常用的grid布局,但是却又非常的好用
以前不管我们怎么布局,大多数用的都是一维布局,在复杂的场景下非常难用
而grid使用的是类似与table的二维布局
(grid 兼容情况)
一开始父元素声明布局为grid
.grid{ display:grid; }
grid-template-columns
grid-template-rous
然后使用grid-template-columns 定义列, grid-template-rous 定义行 ,创建一个4行4列的布局
1 | .grid{ |
fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间(就像Flexbox中无单位的值)
用浏览器查看效果(我用的是谷歌)
可以看到已经有4行4列的效果了
可以指定某行的宽度或高度,比如第二列的第二行高度为50%,宽度为50%
1 | grid-template-columns: 1fr 50% 1fr 1fr; |
还可以使用grid-gap给相邻的网络增加10px的缝隙
1 | .grid{ |
在grid容器里写一个grid-list的div
1 | .grid-list{ grid-column:4; grid-row:2; } |
可以看到grid-column:4把位置放在了父容器网格列中的第四列
而grid-row:2放在了父容器网格行的第二行。
而且grid-column,grid-row很有意思,写多几个div
1 | <div class="grid"> |
可以看到子元素定义grid-column,grid-row可以改变在网格的位置
可以用斜线(开头/结尾)这样写
1 | .grid-list:nth-child(1){ grid-column: 1/5;} |
同样的方式有
grid-column-start (行的开头) grid-column-end(行的结尾)
grid-row-start (列的开头) grid-row-end(列的结尾)
1 | .grid-list:nth-child(1){ grid-column-start:1;grid-column-end:5} |
结果跟上面的一样,感觉比较复杂
个人心得,未来的布局应该会大部分使用grid,现在赶紧学习学习
在ie11下grid不能使用,有什么办法呢?
使用:https://github.com/FremyCompany/css-grid-polyfill (目前还是1.0)