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