本文首发于:www.css88.com/archives/86…
这篇文章是 CSS Grid 布局有用的资源和教程,帮你快速了解相关知识。同时还比较了 CSS Grid 、 Flexbox 、 Table 布局之间的区别,及适用情况。
CSS Grid 布局今年真的很火。该布局系统规范最近获得了主流浏览器的支持,包括最新版本的 Firefox,Chrome,Opera,Safari和 Edge 。 这里我分享一大堆资源,方便你快速学习。
5分钟学会 CSS Grid 布局
❤️❤️❤️❤️❤️ 5星推荐
文章地址:Learn CSS Grid in 5 Minutes
中文译文:5分钟学会 CSS Grid 布局
强烈建议你将这篇文章作为你 Grid 布局的最简入门,文章很短,你甚至不需要5分钟就能读完。文章剔除了你不刚入门不需要关系的术语和复杂的属性,只是为了让你了解最基础的 Grid 布局知识。结合代码和图示,非常言简意赅,浅显易懂。或许通过这篇文章可以让你对 Grid 布局产生浓厚的兴趣。不管学习什么,刚入门时的兴趣和成就感是非常重要的,这也是我推荐这篇文章作为你最简入门的原因。
如何使用 CSS Grid 快速而又灵活的布局
❤️❤️❤️❤️❤️ 5星推荐
文章地址:How to prototype websites quickly with CSS Grid
这篇文章是 5 分钟学会 CSS Grid 布局 的续文,主要让你理解和体会使用 CSS Grid 如何快速又灵活的布局。文章讲述了下图所示的各种布局实现,你自己动手也非常方便。顺带也讲了结合响应式布局的示例。
使用 Grid 实现的响应式布局
❤️❤️❤️❤️❤️ 5星推荐
文章地址:How to make your HTML responsive by adding a single line of CSS
中文译文:一行 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 布局 不是用 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 网格布局入门
❤️❤️❤️ 3星推荐
文章地址:Getting Started with CSS Grid Layout
中文译文: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网格布局
边玩游戏边学 Grid 网格布局
❤️❤️❤️ 3星推荐
这里给大家介绍一个边玩游戏边学习 Grid 网格布局的网站,将枯燥的说明文档瞬间变成有趣、又更易理解。
GRID GARDEN:cssgridgarden.com/
这里也从github上下了一个,作为镜像网页:www.css88.com/tool/gridga…
相应的 边玩游戏边学 Flexbox 布局 请查看:www.css88.com/archives/65…
一句话总结
在生产中使用 CSS Grid 布局只是时间问题。 现在是时候该学习了。
欢迎拍砖留言,更加欢迎推荐其他相关相关优秀的资源和教程。