这篇文章是 CSS Grid 布局有用的资源和教程，帮你快速了解相关知识。同时还比较了 CSS Grid 、 Flexbox 、 Table 布局之间的区别，及适用情况。

CSS Grid 布局今年真的很火。该布局系统规范最近获得了主流浏览器的支持，包括最新版本的 Firefox，Chrome，Opera，Safari和 Edge 。 这里我分享一大堆资源，方便你快速学习。

5分钟学会 CSS Grid 布局

?????????? 5星推荐

文章地址：

中文译文：5分钟学会 CSS Grid 布局

强烈建议你将这篇文章作为你 Grid 布局的最简入门，文章很短，你甚至不需要5分钟就能读完。文章剔除了你不刚入门不需要关系的术语和复杂的属性，只是为了让你了解最基础的 Grid 布局知识。结合代码和图示，非常言简意赅，浅显易懂。或许通过这篇文章可以让你对 Grid 布局产生浓厚的兴趣。不管学习什么，刚入门时的兴趣和成就感是非常重要的，这也是我推荐这篇文章作为你最简入门的原因。

如何使用 CSS Grid 快速而又灵活的布局

?????????? 5星推荐

文章地址：

中文译文：如何使用 CSS Grid 快速而又灵活的布局

这篇文章是 5 分钟学会 CSS Grid 布局 的续文，主要让你理解和体会使用 CSS Grid 如何快速又灵活的布局。文章讲述了下图所示的各种布局实现，你自己动手也非常方便。顺带也讲了结合响应式布局的示例。

使用 Grid 实现的响应式布局

?????????? 5星推荐

文章地址：

中文译文：一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局

这篇文章介绍了如何使用 Grid 实现响应式布局，令人惊奇的是，真的只用了一行 CSS 代码实现，没有乱七八糟的样式名，也不用为每一个屏幕尺寸创建媒体查询。大大节省了很多代码和枯燥无谓的计算，轻松搞定内容区块的响应式布局。

CSS Grid 布局完全指南(图解 Grid 详细教程)

?????????? 5星推荐

文章地址：

中文译文：CSS Grid 布局完全指南(图解 Grid 详细教程)

如果你已经对 Grid 布局有了一定的了解，产生了浓厚的兴趣，那么我建议你完整阅读这篇指南。这篇指南详细介绍了 CSS Grid 知识，包括 Grid 布局相关的术语，网格容器和网格项中每一个属性。并且每个术语和属性都配备了相应的代码和图片示例，所以学习起来也非常轻松好理解。这篇指南还可以作为你平时工作和学习中的字典工具，想用的时候随时翻一下，非常实用和方便，建议收藏。

CSS Grid VS Flexbox VS Table 布局，比较及适用情况

?????????? 5星推荐

CSS 网页布局一直以来都存在这样或那样的问题，被前端开发人员所诟病。不管是用表格（table），浮动（float），定位（postion）和 内嵌块（inline-block），本质上都是只是布局的 hack 而已。Flexbox 的出现很大程度上改善了我们的布局方式。所以在我们讨论 Grid 布局系统时，总是扰不过和 Flexbox 布局的比较，甚至是和 Table 布局的比较。下面是一些总结：

• Grid 布局和 Flexbox 布局在子元素排列和对齐上非常相似，甚至连排列和对齐的属性名和相应的属性值都是一样的，所以你如果熟悉 Flexbox 布局，那么学习 Grid 布局应该可以节省很多时间。
• Grid 布局适用于布局整体页面。它们使页面的整体布局变得非常简单，而且快速。你甚至可以处理一些不规则和非对称的布局设计。
• Flexbox 布局非常适合对齐元素内的内容排版。比如说某一导航组件，某一内容板块非常适合使用 Flexbox 布局。
• Grid 布局适用于二维布局系统，通过行 与 列进行布局。
• Flexbox 布局适用于一维布局系统，通过行 或 列进行布局。
• 从布局系统设计目的的角度来说，二者没有可比性，同时学习它们，并配合使用，你会发现页面布局是如此的简单和灵活。

Grid 和 Flexbox 比较和相似之处，以及适用情况应该很清楚了。建议查看：CSS Grid VS Flexbox：实例比较 以了解更多的信息。

那么我们再来看看 Grid 和 Table 布局的比较：

当然我们这里说 Table 布局 不是用 万博manbetx平台 <table> 标签组进行布局，这种表格标签布局是开发人员的禁忌，致命的原因是布局和标签无法分离，如果你要改布局，不得不修改相应的 万博manbetx平台 标签结构。我们这里讨论的 Table 布局是使用 display:table,display:table-row,display:table-cell 等属性将 万博manbetx平台 元素像 <table> 标签组一样进行布局。

对于属性 Table 布局的前端开发工程师来说，第一眼看到 Grid 布局的介绍都会说：咦，这不是有一个新的 Table 布局吗 ？确实 Table 布局 也是通过行 和 列进行布局的系统，很多概念上两者非常相似，甚至可以说几乎一样。Table 布局 其实是 万博manbetx平台 <table> 标签组布局的延续和升级，很大程度主要解决了 布局样式 和 标签结构 分离的问题。但是其他问题并没有解决，对于复杂的布局来说， Table 布局显得有点捉襟见肘，很多复杂的布局都需要嵌套多层 万博manbetx平台 标签，而且难度无异于手写一个复杂的 万博manbetx平台 <table> 标签组。所以从本质上讲， Table 布局并没有从根本上解决 布局样式 和 标签结构 分离的问题。

不可否认的是，Table 布局的兼容性比 Flexbox 和 Grid 布局都要好，它可以兼容到IE8。

关于 Table 布局的一些应用实例和相关说明可以查看：CSS Table布局-display:table

而 Grid 布局这时真正做到了 布局样式 和 万博manbetx平台 标签结构分离，从上面文章的示例中，我们都可以看到， Grid 布局永远都是网格容器和网格项，真正做到了 万博manbetx平台 标签只作为内容容器，所有表现事情都让 CSS 去解决。

CSS Grid 网格布局入门

?????? 3星推荐

文章地址：

中文译文：CSS Grid 网格布局入门

这篇文章用一些实例讲述了 Grid 网格布局中的一些概念和术语。没什么特点，不过不可以作为一篇入门学习文章。

CSS Grid 布局示例大全

?????? 3星推荐

CSS Grid 布局示例集合，各种各样的布局都可以这里找到，已经你可以看到一些灵活的布局变化。CSS Grid 布局示例大全 。示例大多来自：https://gridbyexample.com/，这个网站也收集了很多关于 Grid 布局 的指南和文章，有兴趣建议阅读一下。

CSS Grid 布局调试

?????????? 5星推荐

CSS Grid 布局作为新 CSS 中的新系统，在使用过程中难免碰到需要调试的时候，这里推荐一下 Firefox DevTools，在调试 Grid 布局方面比 Chrome 的开发者工具强很多。你可以查看 Firefox DevTools 调试 Grid 布局的介绍文章：，也可以看大漠的译文：使用Firefox 网格检查器调试 CSS网格布局

边玩游戏边学 Grid 网格布局

?????? 3星推荐

这里给大家介绍一个边玩游戏边学习 Grid 网格布局的网站，将枯燥的说明文档瞬间变成有趣、又更易理解。

GRID GARDEN：https://cssgridgarden.com/

这里也从github上下了一个，作为镜像网页：https://www.762w6o.com/tool/gridgarden/

相应的 边玩游戏边学 Flexbox 布局 请查看：https://www.762w6o.com/archives/6522

一句话总结

在生产中使用 CSS Grid 布局只是时间问题。 现在是时候该学习了。

欢迎拍砖留言，更加欢迎其他相关相关优秀的资源和教程推荐。