CSS Grid重构Medium的文章布局

欢迎关注富途web开发团队，缺人从众

好像有段时间没有发文了。最近一直在改博客，由于hexo博客的SEO并不太友好，文章页面权重过低。为了提升文章在搜索引擎中的权重，小编可须要花大把时间去整整了。

如今已经去掉了博客的tags，可是做者页面依然高于文章的权重，小编泪奔啊。

先不说这些了，仍是说说CSS Grid吧。

我以为这个就是为页面布局而生的CSS特性。

推荐你们看看这个介绍视频7分钟入门CSS Grid

小编已经准备在之后的后台项目中使用CSS Grid。

正文

当人们想起CSS Grid的时候，想到的一般是图片网格布局和全屏页面。然而，CSS Grid事实上也是一项很适用于文章布局的技术，它能够作一些之前很难完成的事情。

在本教程中，我将阐述怎样用CSS Grid去重构著名站点Medium的文章布局。

此文灵感来自于Scrimba上的免费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来调整一下吧。为了让你们都能跟得上，咱们将一步一步来完成。

基本margins设置

咱们要作的第一件事是将整个<article>标签变成一个grid容器，并设置至少三列。

article {
    display: grid;
    grid-template-columns: 1fr 740px 1fr;
}
复制代码

第一列和最后一列充当边缘部分而且自适应，它们大部分状况下包含着空白区域。中间一列固定为740px，将容纳文章的主体内容。

注意，咱们没有定义行是由于每一行的高度都是由它们的自身内容所决定。文章中的每块内容（段落、图片、标题）自成一行。

下一步是确保网格中的全部内容默认开始于第二条纵向网格线。

article > * {
    grid-column: 2;
}
复制代码

如今咱们获得以下结果：

咱们马上就发现它变得稍微好看一点了，由于两边的空白区域让文本更易于阅读了。

然而，将左右margin属性设置为auto也能实现这种效果，并且更简单。咱们为何要用CSS Grid呢？

好了，当咱们想要模仿Medium上的图片的某些特性的时候，问题出现了。例如插入一张全屏宽的图片，像下面这样：

<p style="width: 100vw;margin-left:-webkit-calc(50% - 50vw);margin-left:calc(50% - 50vw);"><a href="/images/2018-04-20-recreate-medium-article-layout-with-grid/4.jpg" class="fancybox" rel="group"><img src="/images/2018-04-20-recreate-medium-article-layout-with-grid/4.jpg" alt=""></a></p>
复制代码

若是咱们以前用了margin: 0 auto, 咱们将只能利用负边距（margins）来使得图片占据全屏宽度，这种方法显得很hack。

使用CSS Grid的话，能够很轻易的解决这个问题，咱们只须要简单的用列来设置宽度。为了确保图片占据整个宽度，咱们只须要将其跨度设置为从第一列到最后一列。

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

咱们再设置一下上下边距，就获得了一幅漂亮的全屏宽的图片：

多列使用扩展

然而，这并无为咱们解决全部的问题，Medium上还有一些其余类型的布局须要咱们考虑。咱们一块儿来看几个：

中型尺寸图片

这是一种介于常规图片和全屏宽图片之间的图片，咱们称之为中间尺寸图片。以下所示：

<p style="width: -webkit-calc(50vw + 50%);width: calc(50vw + 50%);margin-left:-webkit-calc(25% - 25vw);margin-left:calc(25% - 25vw);"><a href="/images/2018-04-20-recreate-medium-article-layout-with-grid/6.jpeg" class="fancybox" rel="group"><img src="/images/2018-04-20-recreate-medium-article-layout-with-grid/6.jpeg" alt=""></a></p>
复制代码

提示：在移动端，此类图片和全屏宽图片表现一致。本文中，咱们只关注桌面端布局

这将须要在咱们现有的布局中至少新增两列。

引用

另外，在Medium上，若是你添加一条引用，文章的左侧也会出现一条垂直线

<p style="border-left: 3px solid rgba(0,0,0,.84);padding-left: 20px;margin-left: -23px;">←</p>
复制代码

注意这条垂直线，咱们须要在咱们的网格上额外新增一列来实现它。

这须要在网格的左侧有一个小型的列，为了对称，咱们将在右侧也加一个相同的列。

所以，为了支持 引用 和 中间尺寸图片，咱们须要将容器宽度划分为7列而不是三列，以下所示：

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 检查器下展现以下这样：

<p style="width: -webkit-calc(50vw + 50%);width: calc(50vw + 50%);margin-left:-webkit-calc(25% - 25vw);margin-left:calc(25% - 25vw);"><a href="/images/2018-04-20-recreate-medium-article-layout-with-grid/8.png" class="fancybox" rel="group"><img src="/images/2018-04-20-recreate-medium-article-layout-with-grid/8.png" alt=""></a></p>
复制代码

经过设置以下样式能够轻松建立引用：

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

咱们设置它的纵向跨度为从第三条网格线到第五条网格线。同时增长10px的左边距 padding-left: 10px 使得文本看起来像是从第四条网格线开始(第三列也是10px宽)。以下是在网格上的展现：

<p style="width: -webkit-calc(50vw + 50%);width: calc(50vw + 50%);margin-left:-webkit-calc(25% - 25vw);margin-left:calc(25% - 25vw);"><a href="/images/2018-04-20-recreate-medium-article-layout-with-grid/9.png" class="fancybox" rel="group"><img src="/images/2018-04-20-recreate-medium-article-layout-with-grid/9.png" alt=""></a></p>
复制代码

侧面标记

如今还有最后一种类型须要支持。Medium上有一个很是好的标明文章中突出内容的方式。文本变绿，并在右上角产生一个高亮标记。

若是咱们以前用的是 margin: 0 auto 而不是 CSS Grid的话，因为与文章中的其余元素的表现都不同，右上角高亮标记文本元素的建立将会很麻烦。咱们指望它出如今上一个元素的右侧而不是重起一行。若是咱们没有使用CSS Grid，咱们可能不得不用大量的 position: absolute 来实现这种效果。

使用 CSS Grid 就变得超级简单了。咱们只须要设置这种元素从第五条网格线开始。

.aside {
    grid-column: 5;
}
复制代码

这样会自动将其置于文章的右侧。

就这样，如今咱们已经用 CSS Grid 重构了Medium上文章布局的绝大部分，这实际上很简单。但请注意，咱们尚未涉及到响应式，这部分须要从新写一篇文章。

Scrimba上查看全部代码

原文：How to recreate Medium’s article layout with CSS Grid

做者：Per Harald Borgen

译者：Suny