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

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

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

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

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

二、新名词解释

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

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。