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設計新手訓練營。