CSS Grid重構Medium的文章佈局

富途web開發團隊發表於2019-02-27
CSS

歡迎關注富途web開發團隊，缺人從眾

好像有段時間沒有發文了。最近一直在改部落格，因為hexo部落格的SEO並不太友好，文章頁面權重太低。為了提高文章在搜尋引擎中的權重，小編可需要花大把時間去整整了。

現在已經去掉了部落格的tags，但是作者頁面依然高於文章的權重，小編淚奔啊。

先不說這些了，還是說說CSS Grid吧。

我覺得這個就是為頁面佈局而生的CSS特性。

CSS Grid重構Medium的文章佈局

推薦大家看看這個介紹視訊7分鐘入門CSS Grid

小編已經準備在以後的後臺專案中使用CSS Grid。

正文

當人們想起CSS Grid的時候，想到的通常是圖片網格佈局和全屏頁面。然而，CSS Grid事實上也是一項很適用於文章佈局的技術，它可以做一些以前很難完成的事情。

在本教程中，我將闡述怎樣用CSS Grid去重構著名站點Medium的文章佈局。

此文靈感來自於Scrimba上的免費CSS Grid教程。點此檢視

點選此圖獲取全部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重構Medium的文章佈局

一點也不美觀。因此讓我們一起用CSS Grid來調整一下吧。為了讓大家都能跟得上，我們將一步一步來完成。

基本margins設定

我們要做的第一件事是將整個<article>標籤變成一個grid容器，並設定至少三列。

article {
    display: grid;
    grid-template-columns: 1fr 740px 1fr;
}
複製程式碼

第一列和最後一列充當邊緣部分並且自適應，它們大部分情況下包含著空白區域。中間一列固定為740px，將容納文章的主體內容。

注意，我們沒有定義行是因為每一行的高度都是由它們的自身內容所決定。文章中的每塊內容（段落、圖片、標題）自成一行。

下一步是確保網格中的所有內容預設開始於第二條縱向網格線。

article > * {
    grid-column: 2;
}
複製程式碼

現在我們得到如下結果：

CSS Grid重構Medium的文章佈局

我們立刻就發現它變得稍微好看一點了，因為兩邊的空白區域讓文字更易於閱讀了。

然而，將左右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>
複製程式碼
CSS Grid重構Medium的文章佈局

如果我們之前用了margin: 0 auto, 我們將只能利用負邊距（margins）來使得圖片佔據全屏寬度，這種方法顯得很hack。

使用CSS Grid的話，可以很輕易的解決這個問題，我們只需要簡單的用列來設定寬度。為了確保圖片佔據整個寬度，我們只需要將其跨度設定為從第一列到最後一列。

article > figure {
    grid-column: 1 / -1;
    margin: 20px 0;
}
複製程式碼

我們再設定一下上下邊距，就得到了一幅漂亮的全屏寬的圖片：

CSS Grid重構Medium的文章佈局

多列使用擴充套件

然而，這並沒有為我們解決所有的問題，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>
複製程式碼
CSS Grid重構Medium的文章佈局

提示：在移動端，此類圖片和全屏寬圖片表現一致。本文中，我們只關注桌面端佈局

這將需要在我們現有的佈局中至少新增兩列。

引用

另外，在Medium上，如果你新增一條引用，文章的左側也會出現一條垂直線

<p style="border-left: 3px solid rgba(0,0,0,.84);padding-left: 20px;margin-left: -23px;">←</p>
複製程式碼
CSS Grid重構Medium的文章佈局

注意這條垂直線，我們需要在我們的網格上額外新增一列來實現它。

這需要在網格的左側有一個小型的列，為了對稱，我們將在右側也加一個相同的列。

因此，為了支援 引用 和 中間尺寸圖片，我們需要將容器寬度劃分為7列而不是三列，如下所示：

article {
    display: grid;
    grid-template-columns: 1fr 1fr 10px 740px 10px 1fr 1fr;
}
複製程式碼

如果我們使用 Chrome 檢查器，我們可以顯式地看到背後的網格線（如下圖所示），此外，我還增加了一些箭頭來標識出不同的列，以便於識別。

CSS Grid重構Medium的文章佈局

我增加了箭頭用於更好地識別不同列

接下來，我們要做的第一件事是讓所有的預設子項從第四條縱向網格線開始，而不是之前的第二條。

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>
複製程式碼
CSS Grid重構Medium的文章佈局

通過設定如下樣式可以輕鬆建立引用：

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>
複製程式碼
CSS Grid重構Medium的文章佈局

側面標記

現在還有最後一種型別需要支援。Medium上有一個非常好的標明文章中突出內容的方式。文字變綠，並在右上角產生一個高亮標記。

CSS Grid重構Medium的文章佈局

如果我們之前用的是 margin: 0 auto 而不是 CSS Grid的話，由於與文章中的其他元素的表現都不一樣，右上角高亮標記文字元素的建立將會很麻煩。我們期望它出現在上一個元素的右側而不是重起一行。如果我們沒有使用CSS Grid，我們可能不得不用大量的 position: absolute 來實現這種效果。

使用 CSS Grid 就變得超級簡單了。我們只需要設定這種元素從第五條網格線開始。

.aside {
    grid-column: 5;
}
複製程式碼

這樣會自動將其置於文章的右側。

CSS Grid重構Medium的文章佈局

就這樣，現在我們已經用 CSS Grid 重構了Medium上文章佈局的絕大部分，這實際上很簡單。但請注意，我們還沒有涉及到響應式，這部分需要重新寫一篇文章。

Scrimba上檢視所有程式碼

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

作者：Per Harald Borgen

譯者：Suny

相關文章