如何使用CSS Grid重新创建Medium的文章布局
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 Grid时，通常会想到图像网格布局和完整的网页。然而，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 Grid课程。在这里获取课程的访问权限：这里。
Click here to get to the full CSS Grid course.
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文件开始，其中包含您通常在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>
If you open this file in a website without adjusting any layout it’ll look like this:
如果您在不调整任何布局的情况下在网站...