之前写flex布局基础知识整理提到了网格布局,也大概说了下它与flex布局的区别。
flex只是一维布局(沿横向或纵向),而CSS Grid Layout属于二维布局(同时沿横向和纵向);也就是说如果我们只想单独控制行或者列时,我们可以考虑使用flex布局,如果我们想要同时同时行和列时,我们可以考虑使用网格布局。还有一种方法来决定我们是使用弹性盒还是网格布局就是:弹性盒布局是从内容出发的,而网格布局是从布局出发的。
具备二维布局功能的CSS Grid网格布局可以很轻松的实现各种布局,且其兼容性越来越好。相信到后面它会越来越流行。
一、CSS Grid网格布局属性总结
最近抽空,将CSS Grid 布局完全指南(图解 Grid 详细教程)文章(它将CSS Grid网格布局所有属性都列出来了,并且都有详细说明和举例)仔细读了一遍并做了个提炼,制作了思维导图。下图中(PC端需要点击图片放大后点击查看原图再点击放大才可以看清),举例部分我隐藏了,建议点击这里下载思维导图文件查看。
二、注意点
网格容器中的属性justify-items控制的是网格项内的内容的对齐方式(横向,即水平方向上的),而不是justify-content。(justify-content控制的是网格容器内的网格项的对齐方式【因为网格大小可能被写死了,网格容器大于网格合计大小】),同理,align-items和align-content也是一样的;
三、新名词解释
1、fr
这个表示等分的意思;例如:grid-template-columns: 1fr 3fr
,
表示分为两列网格,第一个网格项占列的1份,第二个网格项占列的3份,即第一个网格项的列占总宽度的1/4,第二个网格项的列占总宽度的3/4;
还有这样 grid-template-columns: 100px 1fr 3fr
的用法表示,第一个网格项占列的100px宽度,第二个占总宽度减100px后的宽度的1份,第二个占总宽度减100px后的宽度的3份;
2、minmax(x,y)
这个看字面意思也挺好理解的,就是表示要求的最小和最大值是多少;
比如grid-auto-rows: minmax(auto,200px)
3、span
span表示跨度的意思;它有两种用法,一个是span <number> (后面接纯数字),另一个是span<name> (后面接网格线的名称),显而易见,第一个表示的是跨过多少个网格轨道,第二个表示的是跨到哪一条网格线;
比如:
4、 repeat
比如我们遇到这样的情况grid-template-rows: 1fr 1fr 1fr 2fr
我们可以这样写grid-template-rows: repeat(3,1fr) 2fr
;或者遇到 grid-template-rows: 1fr 2fr 1fr 2fr 1fr 2fr 2 fr
我们可以这样写grid-template-rows: repeat(3,1fr 2fr) 2fr
;
5、auto-fit
自适应的意思,例如这样可以这样用 grid-template-columns:repeat(auto-fit,100px)
表示网格布局系统会根据浏览器的宽度自行计算及分布n个100px宽度的网格项;
再比如:grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
6、object-fit及object-position(自己查资料遇到不相关的新概念)
按照愚人码头的翻译写了简单的demo
object-fit及object-position具体解释可参考半深入理解CSS3 object-position/object-fit属性
四、其他资料推荐
1、5分钟学会 CSS Grid 布局--愚人码头版
这个就介绍了常用的属性,可以作为入门资料。
2、如何使用 CSS Grid 快速而又灵活的布局
这个可以让你很快理解grid-template-areas及grid-area属性
3、网格布局的基本概念--MDN资料
这个资料介绍的不是很详细,但也可以大概过下。。。
4、练习Grid布局的游戏推荐
http://cssgridgarden.com/#zh-cn