css 网格布局_5个掌握CSS网格布局的快速资源

css 网格布局

在今天的快速提示中，我将向您展示五个掌握CSS网格布局的资源。 让我们潜入吧！

网格快速入门

自CSS诞生以来，网格布局可以说是Web开发人员最重要的发展之一。 这是一个专门用于基于网格的用户界面的布局系统，这意味着不再需要标准的“浮动”方法（说实话，hack），作为布局网页的主要方法。

第一份工作草案于2011年发布，无论您是否相信，我们都要感谢微软对其所做的许多开发工作。 最初的四位作者中有三位是Microsoft团队的成员。 该初始版本现已过时，此后已被CSS Grid Layout Module Level 1取代。

5个方便的资源

浏览器对Grid的支持已经非常有前途了，因此现在是您熟悉语法的时候了。 这里有一些很棒的资源可以帮助您开始。

Mozilla：CSS网格布局简介

第一个示例来自Mozilla。 它对CSS Grid Layout的介绍既涵盖了基础知识，又涵盖了诸如命名行之类的高级概念。 这是一个详尽的资源，但也清晰地显示了清晰的导航，引人入胜的图形以及您可以用来玩耍的笔。

learncssgrid.com

另一个详尽的资源是Jonathan Suh的 learningcssgrid.com 。 它解释了语法背后的理论，同时还显示了您可能需要的一些最常见的布局模式的示例。

CSS技巧：网格的完整指南

接下来，我们转到Chris House的 CSS Tricks，获得Chris House的大量资源（在视频中，我错误地将Chris Coyier归功于Chris Coyier，对此表示歉意）。 正是您所期望的“网格的完整指南”。 非常完整。 它在单独的列中详细介绍了网格容器和网格项目的属性。 像往常一样，来自CSS Tricks的出色工作。

示例网格

“示例网格”由Rachel Andrew（她自己是CSS网格布局工作组的成员）开发和维护，已经存在了一段时间。 除了为您提供有关该规范的所有基本信息的“入门指南”之外，它还为您提供了许多示例和最常见布局的“抓紧模式”。

Envato Tuts上CSS网格课程+

如果您喜欢通过视频学习，我强烈建议（显然！）您可以看看Craig Campbell的这些课程。 第一个（ 用于Web Designer的3个CSS Grid项目 ）将引导您完成三个CSS Grid项目，并在Codepen上提供示例供您分叉和练习。

Craig的最新课程（ “将CSS网格布局和Flexbox结合在一起” ）介绍了如何将CSS最强大的两个布局模块（Grid和Flexbox）一起使用。

前进并学习！

翻译自: https://webdesign.tutsplus.com/tutorials/5-quick-resources-for-mastering-css-grid-layout--cms-29919

css 网格布局