想学习 CSS Grid 布局吗？这里有我的免费完整课程！

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

点击图片即可进入课程。

前段时间，我深入研究了 CSS Grid，并为此创建了一门完整的课程。我学得越多，就越确信 CSS Grid 代表着网站布局的未来。

这门课程是免费的，观看时甚至无需验证身份。但是，如果您想保存笔记或在课程期间提问，则需要登录。

现在让我们来看看你将学到什么以及如何学习。

注：如果您对 CSS 变量和 CSS Flexbox 更感兴趣，我还推出了免费的CSS 变量课程和CSS Flexbox 课程。

课程结构

本课程分为三个部分。前两个部分是线性的，应该按顺序观看。它们包含了我认为最重要的 CSS Grid 概念。

第三部分是奖励部分，您将学习前两部分中没有涉及的概念，并看到一些您可以使用 CSS Grid 构建的示例。

第一部分——基础知识

我们先来谈谈为什么要学习 CSS Grid。我会向你展示 CSS Grid 相较于 Bootstrap 等框架的优势，并对比两种方法的代码。

接下来我们将直接进入 CSS Grid 的学习，从一个非常简单的网格开始，教你如何定义行和列，以及如何使用不同的值来设置宽度和高度。这也会教会你响应式设计的基础知识。

下一步是创建一个虚拟网站布局。在这里，您将学习如何在网格中定位元素。第一部分最后，我们将通过一个有趣的实验来演示grid-template-areas如何使用该属性快速创建布局原型。

完成第一部分后，你应该掌握足够的知识，可以在个人项目中开始使用 CSS Grid。以下是你将学习的主要概念：

• display: grid;
• grid-template-columns，grid-template-rows
• grid-template（速记）
• grid-column，grid-row
• grid-template-areas
• grid-area
• grid-gap
• fr

想要快速了解本节内容，您还可以阅读我的两篇文章：《5分钟学会CSS Grid》和《如何使用CSS Grid快速制作网站原型》。这两篇文章也涉及了一些概念，但不如课程那样深入。

第二部分——进阶内容

在这里，您将学习高级响应式设计。这将使您能够在本节末尾创建一个超酷的图片网格：

注意网格是如何根据项目宽度进行调整的，以确保无论宽度如何都能正常工作。

如您所见，它会根据屏幕宽度改变列数，并重新排列项目（这些项目大小和形状各不相同），以避免出现空白区域。

大部分神奇的功能都体现在一行CSS代码中。然而，这行代码有点复杂，所以我们会一步一步地讲解，确保你完全理解。

你将学到以下内容：

• auto-fit
• repeat
• minmax
• grid-auto-flow
• 隐式行
• 网格如何布局项目

到了这个阶段，你应该能够熟练地使用 CSS Grid 创建几乎任何布局。即使你还有不了解的概念，你也完全有能力自己弄明白，因为你已经对 CSS Grid 有了扎实的核心理解。

奖励部分

最后一部分是附加内容。这部分内容无需按顺序观看，因为各个视频教程之间没有关联。这部分主要包含一些我们在前两部分中未能涵盖的 CSS Grid 概念。此外，你还会看到 Flexbox 和 Grid 的对比，我会讲解这两个模块的区别以及如何将它们结合使用。

此外，我的联合创始人Magnus还会给大家展示一个非常棒的例子，讲解如何使用 CSS Grid 重新创建文章布局。这次讲座也启发我写了一篇关于同一主题的文章。

Magnus 将带你了解如何使用 CSS Grid 构建文章布局。

最后，我们会根据需要随时补充课程内容。

如果您觉得课程中缺少某些内容，请告诉我们，我们将在奖励部分制作关于该主题的新屏幕录像。

以下是您将在奖励部分学到的内容。

• 命名线
• 论证和协调（项目、自身和内容）
• 创建 Medium 风格的文章布局（作者：Magnus）
• CSS Flexbox 与 Grid 的区别

斯克林巴舞曲

本课程使用 Scrimba 构建，Scrimba 是一款交互式编码屏幕录制工具，由我和Sindre共同创立。

Scrimba 屏幕录像看起来像普通视频，但它们是完全交互式的。您可以编辑录像中的代码。

这里有一个GIF动画来解释这个概念：

暂停屏幕录制 → 编辑代码 → 运行！ → 查看更改

当你需要通过实验来更好地理解代码，或者只是想复制一段代码时，Scrimba 屏幕录像功能非常实用。此外，Scrimba 屏幕录像的文件大小仅为普通视频的 1%，这意味着即使网络连接速度较慢，也能轻松流畅地观看。

所以我真心希望你会喜欢这门课程。今天就报名吧，我们课程上见 :)

感谢阅读！我叫佩尔，是Scrimba的联合创始人，我热爱帮助人们学习新技能。如果您想收到新文章和资源的通知，请在Twitter上关注我。