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

css grid布局

When people think of CSS Grid they normally envision image grid layouts and full web pages. However, CSS Grid is actually a superb technology for laying out articles as well, as it allows you to do things which previously was tricky to achieve.

人们想到CSS网格时，通常会想到图像网格布局和完整的网页。但是，CSS Grid实际上也是一种用于布置文章的精湛技术，因为它允许您执行以前很难完成的事情。

In this tutorial, I’ll explain how to recreate the famous Medium article layout using CSS Grid.

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

Note: I’ve also been part of creating a free 13-part CSS Grid course at Scrimba. Get access to the course here.

注意：我还参与了在Scrimba创建一个由13个部分组成的免费CSS网格课程。在此获取该课程的访问权限。

In the course, my colleague Magnus Holm will go through how to create an article layout using CSS Grid. So if you prefer watching instead of reading, be sure to check out his screencast.

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

内容 (The content)

We’re going to start off with a basic HTML file, which contains the type of content you’ll typically find in a Medium article. For example title, paragraphs, subtitles, images, quotes and so forth. Here’s an outtake:

我们将从一个基本HTML文件开始，该文件包含您在“中型”文章中通常会找到的内容类型。例如标题，段落，字幕，图像，引号等。这是一个额外费用：

<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>

If you open this file in a website without adjusting any layout it’ll look like this:

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

Not particularly elegant. So let’s fix it with CSS Grid. We’ll do it step by step so that it’ll be easy for you to follow.

不是特别优雅。因此，让我们使用CSS Grid对其进行修复。我们将逐步进行操作，以使您易于遵循。

边距的基本设置 (Basic setup for margins)

The first thing we need to do is turn the whole article tag into a grid and give it at least three columns.

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

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

The first and last columns are responsive and act as margins. They’ll contain white space in most cases. The middle column is fixed at 740 pixels and will hold the content of the article.

第一列和最后一列是响应式的，并充当边距。在大多数情况下，它们将包含空格。中间栏固定为740像素，将容纳文章的内容。

Notice that we’re not defining the rows as they’ll simply be as tall as they need to be in order to fit their content. Each content block in the article (paragraph, image, title) will get its own row.

请注意，我们并未定义行，因为它们只是为了符合其内容而需要的高度。文章中的每个内容块(段落，图像，标题)都将拥有自己的一行。

The next step is to make sure all the content in the grid starts at the second column line by default.

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

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

We now have the following result:

现在，我们得到以下结果：

We can instantly see that this looks better, as the white space on each side makes the text easier to read.

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

However, this effect could have been achieved just as easily using by setting the left and right margin property to auto. So why use CSS Grid?

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

Well, the problem arises when we want to mimic Medium’s image features. For example creating full-width images, like this one:

好吧，当我们要模仿Medium的图像功能时，就会出现问题。例如，创建全幅图像，如下所示：

If we had used margin: 0 auto this would have forced us to apply negative margins to the images to make them take up the entire website width, which is hacky.

如果我们使用margin: 0 auto这将迫使我们对图像应用负的页边距，以使其占据整个网站宽度，这实在是骇人听闻。

With CSS Grid though, this becomes a piece of cake, as we’ll simply use columns to set the width. To make our image take up the entire width we’ll just tell it to span from the first to the last column line.

但是，对于CSS Grid，这只是小菜一碟，因为我们将仅使用列来设置宽度。为了使图像占据整个宽度，我们只需要告诉它从第一列到最后一列就可以跨越。

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

We’ve also set some margin on the top and bottom. And then we have a nice full-width image:

我们还在顶部和底部设置了一些边距。然后我们有一个不错的全角图像：

扩展更多列 (Expanding with more columns)

However, this doesn’t get us all the way, as Medium has a few other layouts which we need to account for. Let’s look at a couple of them:

但是，这并不能完全解决问题，因为Medium还需要考虑其他一些布局。让我们看看其中的几个：

中型图片 (Mid-sized images)

This is the image option in between the normal one and the full width one, which we’ll call a mid-sized one. It looks like this:

这是介于正常宽度和全角宽度之间的图像选项，我们将其称为中型宽度。看起来像这样：

NOTE: If you’re watching on mobile, this image is identical to the full width one. In this article, we focus on the desktop layout only.

注意：如果 您正在手机上观看，此图像与全角图像相同。 在本文中，我们仅关注桌面布局。

This will require at least two new columns to our layout.

这将需要至少两个新列用于我们的布局。

行情 (Quotes)

In addition, Medium also places a vertical line on the left-hand side of the article if you add a quote:

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

← Notice the vertical line. We’ll need to add an extra column to our grid because of it.

←注意垂直线。因此，我们需要在网格中添加一个额外的列。

This requires a tiny column on the left-hand side of the grid. To make things symmetric, we’ll also add a similar column on the right-hand side.

这需要在网格的左侧有一小列。为了使事物对称，我们还将在右侧添加一个类似的列。

So to support both quotes and mid-sized images we’ll need to split the entire width into seven columns instead of three, like this:

因此，为了同时支持引号和中型图片，我们需要将整个宽度分成七列而不是三列，如下所示：

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

If we use the Chrome inspector we can actually see the underlying grid lines (see image below). Plus, I’ve added pointers to make it easier to recognise the different columns.

如果使用Chrome检查器，我们实际上可以看到底层的网格线(请参见下图)。另外，我添加了指针以使其更容易识别不同的列。

I’ve added pointers to make it easier to recognise the different columns.

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

The first thing we need to do it to make all default items to start at the fourth column line instead of the second one.

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

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

Then we can create the mid-sized image by doing:

然后，我们可以通过执行以下操作来创建中型图片：

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

Here’s how that looks with the Chrome inspector activated:

启用Chrome检查器后的外观如下：

The quotes are easily created by doing the following:

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

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

We make it span from the third to the third to the fifth column line. We’re also adding padding-left: 10px; so that the text will seem to start at the fourth column line (the third column is 10 pixels wide as well). Here’s how it looks on the grid.

我们将其从第三列扩展到第三列到第五列。我们还添加了padding-left: 10px; 这样文本就好像从第四列开始(第三列也是10像素宽)。这是它在网格上的外观。

边标 (Sidemarks)

Now there’s one last thing we need to support. Medium has a pretty nice way of signalling which content in the article is most highlighted. The text turns into green, and it gets a Top highlight on the right hand side.

现在，我们需要支持的最后一件事。 Medium具有一种很好的方式来表示文章中哪些内容是最突出的。文本变为绿色，并且在右侧获得顶部突出显示 。

The Top highlight text element would be a nightmare to create if we’d used margin: 0 auto; instead if CSS Grid. This is because the element acts different from all the other elements in the article. Instead of appearing on a new line, it’s suppose to appear on the right hand side of the previous element. If we didn’t use CSS Grid we’d probably have to start messing with position: absolute; to make this work.

如果使用margin: 0 auto;则Top高亮文本元素将是一个噩梦margin: 0 auto; 相反，如果是CSS Grid。这是因为该元素的行为不同于本文中的所有其他元素。假设它没有出现在新行上，而是出现在上一个元素的右侧。如果我们不使用CSS Grid，那么我们可能不得不开始搞乱position: absolute; 使这项工作。

But with CSS Grid it’s super simple. We’ll just make that kind of element start on the fourth column line.

但是使用CSS Grid超级简单。我们将使这种元素从第四列开始。

.aside {  grid-column: 5;  
}

That’ll automatically make it place itself to the right of the article:

这将自动使其位于文章的右侧：

Note: I haven’t highlighted the text in green, as that’s got nothing to do with CSS Grid.

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

And that’s it! We’ve now recreated most of Medium’s article layout using CSS Grid. And it was actually pretty easy. Note however that we’ve not touched responsiveness, as that requires a whole new article in itself.

就是这样！现在，我们已经使用CSS Grid重新创建了Medium的大部分文章布局。而且实际上很容易。但是请注意，我们还没有涉及响应能力，因为这本身就需要全新的文章。

Check out this Scrimba playground to look at all the code.

查看此Scrimba游乐场，查看所有代码。

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营。