CSS Grid网格布局属性总结及网格布局资料推荐

之前写flex布局基础知识整理提到了网格布局,也大概说了下它与flex布局的区别。

flex只是一维布局(沿横向或纵向),而CSS Grid Layout属于二维布局(同时沿横向和纵向);也就是说如果我们只想单独控制行或者列时,我们可以考虑使用flex布局,如果我们想要同时同时行和列时,我们可以考虑使用网格布局。还有一种方法来决定我们是使用弹性盒还是网格布局就是:弹性盒布局是从内容出发的,而网格布局是从布局出发的。

具备二维布局功能的CSS Grid网格布局可以很轻松的实现各种布局,且其兼容性越来越好。相信到后面它会越来越流行。

一、CSS Grid网格布局属性总结

最近抽空,将CSS Grid 布局完全指南(图解 Grid 详细教程)文章(它将CSS Grid网格布局所有属性都列出来了,并且都有详细说明和举例)仔细读了一遍并做了个提炼,制作了思维导图。下图中(PC端需要点击图片放大后点击查看原图再点击放大才可以看清),举例部分我隐藏了,建议点击这里下载思维导图文件查看。

CSS网格属性总结--收缩例子版.png

二、注意点

网格容器中的属性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> (后面接网格线的名称),显而易见,第一个表示的是跨过多少个网格轨道,第二个表示的是跨到哪一条网格线;
比如:


image.png

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资料
这个资料介绍的不是很详细,但也可以大概过下。。。

CSS网格布局基本概念(mdn版).png

4、练习Grid布局的游戏推荐
http://cssgridgarden.com/#zh-cn

通关了。。。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容