如何使用 CSS Grid 重新创建 Medium 的文章布局

当人们想到 CSS 网格时，通常会想到图像网格布局和完整的网页。然而，CSS 网格实际上也是一种用于布局文章的卓越技术，因为它可以让你完成以前难以实现的事情。

在本教程中，我将解释如何使用 CSS Grid 重新创建著名的 Medium 文章布局。

注：我还参与了 Scrimba 上一门包含 13 部分的免费 CSS Grid 课程。点击此处访问该课程。

单击图像即可获得完整的 CSS Grid 课程。

在本课程中，我的同事Magnus Holm将讲解如何使用 CSS Grid 创建文章布局。如果您更喜欢观看而不是阅读，请务必观看他的截屏视频。

内容

我们将从一个基本的 HTML 文件开始，其中包含 Medium 文章中常见的内容类型。例如标题、段落、副标题、图片、引言等等。以下是摘录：

<article>

<h1>Running any NPM package in the browser locally</h1>

<p>JavaScript has never had any official solution for distributing packages, and every web platform (Rails, Django etc) has their own idea of how to structure and package JavaScript. In the last few years, NPM has started becoming the canonical way of distribution, with Webpack as the build system, but there’s no way to load NPM packages in the browser without a server-side component.</p>

<blockquote>

<p>Scrimba is a platform for interactive coding screencast where           
you can run the code at any moment in time.</p>

</blockquote>

<figure>

<img src="https://mave.me/img/projects/full\_placeholder.png">

</figure>

如果您在网站上打开此文件而不调整任何布局，它将看起来像这样：

不太优雅。所以让我们用 CSS Grid 来解决这个问题。我们会一步一步来，方便你理解。

边距的基本设置

我们需要做的第一件事是将整个article标签变成一个网格，并给它至少三列。

article {  
    display: grid;  
    grid-template-columns: 1fr 740px 1fr;  
}

第一列和最后一列是响应式的，用作边距。大多数情况下，它们会包含空白。中间列固定为 740 像素，用于容纳文章内容。

请注意，我们没有定义行，因为它们的高度仅取决于其内容的需要。文章中的每个内容块（段落、图片、标题）都将拥有自己的行。

下一步是确保网格中的所有内容默认从第二列开始。

article > \* {  
    grid-column: 2;  
}

我们现在得到以下结果：

我们可以立即看到它看起来更好，因为两边的空白使文本更容易阅读。

不过，通过将 left 和 right 属性设置为 auto，也可以轻松实现此效果margin。那么为什么要使用 CSS Grid 呢？

好吧，当我们想要模仿 Medium 的图片功能时，问题就出现了。例如创建全宽图片，像这样：

如果我们使用margin: 0 auto这个，就会迫使我们对图像应用负边距，使它们占据整个网站宽度，这是很不礼貌的。

不过，有了 CSS Grid，这一切就变得轻而易举了，因为我们只需使用列来设置宽度即可。为了让图片占据整个宽度，我们只需让它从第一列到最后一列。

article > figure {  
    grid-column: 1 / -1;  
    margin: 20px 0;  
}

我们还在顶部和底部设置了一些边距。这样我们就得到了一个漂亮的全宽图像：

使用更多列进行扩展

然而，这还不够，Medium 还有一些其他布局需要考虑。我们来看看其中几个：

中等尺寸的图像

这是介于正常尺寸和全宽尺寸之间的图片选项，我们称之为中等尺寸。它看起来如下：

注意：如果您在移动设备上观看，此图像与全宽图像相同。本文仅关注桌面版布局。

这将需要我们的布局至少增加两列新列。

引号

此外，如果您添加引文，Medium 还会在文章左侧放置一条垂直线：

← 注意那条垂直线。我们需要在网格中添加一列。

这需要在网格左侧添加一个小列。为了保持对称，我们还会在右侧添加一个类似的列。

因此，为了支持引文和中等尺寸的图像，我们需要将整个宽度分成七列而不是三列，如下所示：

article {  
    display: grid;  
    **grid-template-columns: 1fr 1fr 10px 740px 10px 1fr 1fr;**  
}

如果我们使用 Chrome 检查器，我们实际上可以看到底层的网格线（见下图）。此外，我还添加了指针，以便更容易识别不同的列。

我添加了指针，以便更容易识别不同的列。

我们需要做的第一件事是使所有默认项目从第四列开始，而不是第二列。

article > \* {  
    grid-column: 4;  
}

然后我们可以通过执行以下操作来创建中等尺寸的图像：

article > figure {  
    grid-column: 2 / -2;  
    margin: 20px 0;  
}

Chrome 检查器激活后的外观如下：

通过执行以下操作可以轻松创建引号：

article > blockquote {  
    grid-column: 3 / 5;  
    padding-left: 10px;  
    color: #666;  
    border-left: 3px solid black;  
}

我们让它从第三列横线延伸到第三列再延伸到第五列。我们还添加了padding-left: 10px;一个选项，让文本看起来像是从第四列横线开始的（第三列也是 10 像素宽）。它在网格上看起来是这样的。

侧标

现在还有最后一件事需要支持。Medium 有一个非常好的方式来指示文章中哪些内容最受关注。文本会变成绿色，并在右侧显示为“顶部”突出显示。

如果我们使用 CSS Grid，那么创建顶部高亮文本元素将会是一场噩梦。这margin: 0 auto;是因为该元素的行为与文章中所有其他元素不同。它应该出现在前一个元素的右侧，而不是新开一行。如果我们不使用 CSS Grid，我们可能不得不自己动手position: absolute;才能实现这一点。

但使用 CSS Grid 非常简单。我们只需让这类元素从第四列开始即可。

.aside {  
    grid-column: 5;  
}

这会自动将其放置在文章的右侧：

注意：我没有用绿色突出显示文本，因为这与 CSS Grid 无关。

就这样！现在，我们已经使用 CSS Grid 重新创建了 Medium 的大部分文章布局。这其实相当简单。不过请注意，我们还没有触及响应式设计，因为这本身就需要一篇全新的文章。

查看这个 Scrimba 游乐场来查看所有代码。

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