您的位置:首页 » 分类: HTML+CSS & HTML5+CSS3 » 文章: 如何快速学习 CSS Grid 布局 – 相关资源和教程推荐

如何快速学习 CSS Grid 布局 – 相关资源和教程推荐

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

这篇文章是 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

中文译文:如何使用 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星推荐

文章地址: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 网格布局入门

❤️❤️❤️ 3星推荐

文章地址:Getting Started with CSS Grid Layout

中文译文: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 布局的介绍文章:Debugging CSS Grid Layouts With Firefox Grid Inspector,也可以看大漠的译文:使用Firefox 网格检查器调试 CSS网格布局

边玩游戏边学 Grid 网格布局

❤️❤️❤️ 3星推荐

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

GRID GARDEN:http://cssgridgarden.com/

这里也从github上下了一个,作为镜像网页:/tool/gridgarden/

相应的 边玩游戏边学 Flexbox 布局 请查看:/archives/6522

一句话总结

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

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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注亚洲城线上娱乐官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

1 条评论 - 关于 “如何快速学习 CSS Grid 布局 – 相关资源和教程推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注