首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

本文首发于:http://www.css88.com/archives/8675

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

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

5分钟学会 CSS Grid 布局

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

文章地址:

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

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

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

文章地址:

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

使用 Grid 实现的响应式布局

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

文章地址:

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

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

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

文章地址:

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

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

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

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

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

CSS Grid 网格布局入门

❤️❤️❤️ 3星推荐

文章地址:

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

一句话总结

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181114G0ASJZ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券