如何快速学习 CSS Grid 布局 - 相关资源和教程推荐-CSDN博客

本文首发于：www.css88.com/archives/86…

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

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

5分钟学会 CSS Grid 布局

❤️❤️❤️❤️❤️ 5星推荐

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

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

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

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

使用 Grid 实现的响应式布局

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

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

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

❤️❤️❤️❤️❤️ 5星推荐

文章地址：A Complete Guide to Grid

中文译文：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 布局不是用 HTML <table> 标签组进行布局，这种表格标签布局是开发人员的禁忌，致命的原因是布局和标签无法分离，如果你要改布局，不得不修改相应的 HTML 标签结构。我们这里讨论的 Table 布局是使用 display:table,display:table-row,display:table-cell 等属性将 HTML 元素像 <table> 标签组一样进行布局。

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

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

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

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

CSS Grid 网格布局入门

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

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

CSS Grid 布局示例大全

❤️❤️❤️ 3星推荐

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

CSS Grid 布局调试

❤️❤️❤️❤️❤️ 5星推荐

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