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 （后面接纯数字），另一个是span （后面接网格线的名称），显而易见，第一个表示的是跨过多少个网格轨道，第二个表示的是跨到哪一条网格线；
比如：

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

通关了。。。