最近我正在嘗試重新設(shè)計(jì)博客列表。想法是為讀者提供來自這些博客的最新文章，采用雜志風(fēng)格的布局，而不是僅僅在側(cè)邊欄中列出我們最喜歡的博客。

輕松的部分是從我們最喜歡的RSS源中獲取包含摘要的文章列表。為此，我們使用了WordPress插件Feedzy lite，它可以將多個(gè)Feed聚合到一個(gè)按時(shí)間排序的列表中——非常適合展示它們的最新內(nèi)容。困難的部分是讓它看起來很棒。

該插件的默認(rèn)列表UI相當(dāng)平淡無奇，所以我想將其樣式設(shè)計(jì)成類似報(bào)紙或雜志網(wǎng)站，混合使用較小和較大的“特色內(nèi)容”面板。

這似乎是CSS Grid的理想用例！為不同的布局創(chuàng)建網(wǎng)格布局，例如，一個(gè)五列布局和一個(gè)三列布局，然后使用媒體查詢在不同的斷點(diǎn)之間切換。對吧？但是，當(dāng)我們可以使用網(wǎng)格的自動(dòng)適應(yīng)選項(xiàng)為我們自動(dòng)創(chuàng)建一個(gè)流暢的響應(yīng)式網(wǎng)格時(shí)，我們真的需要這些媒體查詢——以及識別斷點(diǎn)的所有麻煩嗎？

這種方法聽起來很有吸引力，但是當(dāng)我開始引入跨列元素時(shí)，我遇到了網(wǎng)格在窄屏幕上溢出的問題。媒體查詢似乎是唯一解決方案。也就是說，直到我找到一個(gè)解決方法！

在查看了幾個(gè)關(guān)于CSS Grid的教程后，我發(fā)現(xiàn)它們主要分為兩類：

1. 向您展示如何使用跨越元素創(chuàng)建有趣的布局的教程，但列數(shù)是固定的。
2. 解釋如何制作自動(dòng)調(diào)整大小的響應(yīng)式網(wǎng)格的教程，但所有網(wǎng)格項(xiàng)的寬度都相同（即沒有跨列）。

我想讓網(wǎng)格同時(shí)做到這兩點(diǎn)：創(chuàng)建一個(gè)完全響應(yīng)式的流體布局，其中還包括響應(yīng)式調(diào)整大小的多列元素。

美妙之處在于，一旦您理解了響應(yīng)式網(wǎng)格的局限性，以及為什么以及何時(shí)列跨度會(huì)破壞網(wǎng)格響應(yīng)性，就可以僅用十幾行代碼加上一個(gè)簡單的媒體查詢（或者如果您愿意限制跨度選項(xiàng)，甚至無需媒體查詢）來定義響應(yīng)式雜志/新聞樣式布局。

這是一個(gè)視覺效果，顯示了開箱即用的RSS插件以及我們對其進(jìn)行樣式設(shè)置后的樣子。

此雜志風(fēng)格的網(wǎng)格布局是完全響應(yīng)式的，彩色特色面板會(huì)隨著列數(shù)的變化而動(dòng)態(tài)調(diào)整。頁面顯示大約50篇文章，但布局代碼與顯示的項(xiàng)目數(shù)量無關(guān)。將插件升級以顯示100個(gè)項(xiàng)目，布局一直保持有趣。

所有這一切都只使用CSS實(shí)現(xiàn)，并且只有一個(gè)媒體查詢來處理最窄屏幕（即小于460像素）上的單列顯示。

令人難以置信的是，這個(gè)布局只用了21行CSS代碼（不包括全局內(nèi)容樣式）。但是，為了用這么少的代碼行實(shí)現(xiàn)這種靈活性，我不得不深入研究CSS Grid的一些更晦澀的部分，并學(xué)習(xí)如何解決它的一些固有限制。

產(chǎn)生此布局的代碼的基本元素非常短，證明了CSS Grid的強(qiáng)大功能：

<code>.archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-gap: 32px;
  grid-auto-flow: dense;
}

/* 特寬網(wǎng)格文章 */
.article:nth-child(31n   1) {
  grid-column: 1 / -1;
}
.article:nth-child(16n   2) {
  grid-column: -3 / -1;
}
.article:nth-child(16n   10) {
  grid-column: 1 / -2;
}

/* 手機(jī)單列顯示 */
@media (max-width: 459px) {
  .archive {
    display: flex;
    flex-direction: column;
  }
}</code>

本文中的技術(shù)同樣可以很好地用于設(shè)置任何動(dòng)態(tài)生成的內(nèi)容，例如最新文章小部件、存檔頁面或搜索結(jié)果的輸出。

創(chuàng)建響應(yīng)式網(wǎng)格

我設(shè)置了十七個(gè)項(xiàng)目，顯示各種模擬內(nèi)容——標(biāo)題、圖像和摘錄——它們都包含在一個(gè)包裝器中

<code><div>
  </div></code>

將這些項(xiàng)目轉(zhuǎn)換為響應(yīng)式網(wǎng)格的代碼非常緊湊：

<code>.archive {
  /* 將元素定義為網(wǎng)格容器 */
  display: grid;
  /* 自動(dòng)適應(yīng)盡可能多的項(xiàng)目在一行上，而不會(huì)低于180像素 */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  /* 文章之間的一點(diǎn)間距 */
  grid-gap: 1em;
}</code>

請注意，行高會(huì)自動(dòng)調(diào)整以適應(yīng)行中最高的內(nèi)容。如果您更改Pen的寬度，您將看到項(xiàng)目流暢地增長和縮小，列數(shù)分別從一列變?yōu)槲辶小?/p>

此處使用的CSS Grid魔法是auto-fit關(guān)鍵字，它與應(yīng)用于grid-template-columns的minmax()函數(shù)配合使用。

工作原理

我們可以僅使用以下方法實(shí)現(xiàn)五列布局：

<code>.archive {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}</code>

但是，這將創(chuàng)建五個(gè)列，這些列會(huì)隨著不同屏幕寬度的變化而增長和縮小，但始終保持五列，導(dǎo)致它們在小屏幕上變得非常窄。第一個(gè)想法可能是創(chuàng)建一堆媒體查詢并使用不同數(shù)量的列重新定義網(wǎng)格。這可以正常工作，但是使用auto-fit關(guān)鍵字，所有這些都自動(dòng)完成。

為了使auto-fit按我們想要的方式工作，我們需要使用minmax()函數(shù)。這告訴瀏覽器列可以壓縮到多小，然后是它們可以擴(kuò)展到的最大寬度。更小，它將自動(dòng)減少列數(shù)。更大，列數(shù)增加。

<code>.archive {
  grid-template-columns: repeat (auto-fit, minmax(180px, 1fr));
}</code>

在此示例中，瀏覽器將盡可能多地容納180像素寬的列。如果剩余空間，列將通過在它們之間共享剩余空間而平均增長——這就是1fr值所說的：使列成為可用寬度的相等分?jǐn)?shù)。

拖動(dòng)窗口，隨著可用空間的增加，所有列都會(huì)平均增長以使用任何額外的空間。列將繼續(xù)增長，直到可用空間允許增加一列180像素，此時(shí)將出現(xiàn)一整列。減小屏幕寬度，該過程將反轉(zhuǎn)，完美地將網(wǎng)格調(diào)整到單列布局。神奇！

而您只需一行代碼即可獲得所有這些響應(yīng)能力。這有多酷？

使用“autoflow: dense”創(chuàng)建跨度

到目前為止，我們有一個(gè)響應(yīng)式網(wǎng)格，但所有項(xiàng)目寬度都相同。對于新聞或雜志布局，我們需要一些內(nèi)容通過跨越兩列或更多列甚至可能跨越所有列來突出顯示。

為了創(chuàng)建多列跨度，我們可以將column-span功能添加到我們想要占據(jù)更多空間的網(wǎng)格項(xiàng)目中。例如，如果我們希望列表中的第三個(gè)項(xiàng)目為兩列寬，我們可以添加：

<code>.article:nth-child(3) {
  grid-column: span 2;
}</code>

但是，一旦我們開始添加跨度，就會(huì)出現(xiàn)許多問題。首先，網(wǎng)格中可能會(huì)出現(xiàn)間隙，因?yàn)閷掜?xiàng)目可能無法適應(yīng)行，因此網(wǎng)格自動(dòng)適應(yīng)將其推到下一行，留下它本來應(yīng)該在的位置的間隙：

簡單的解決方法是向網(wǎng)格元素添加grid-auto-flow: dense，這會(huì)告訴瀏覽器用其他項(xiàng)目填充任何間隙，有效地使較窄的內(nèi)容圍繞較寬的項(xiàng)目流動(dòng)，如下所示：

請注意，項(xiàng)目現(xiàn)在是無序的，第四個(gè)項(xiàng)目出現(xiàn)在雙倍寬度的第三個(gè)項(xiàng)目之前。據(jù)我所知，無法避免這種情況，這是您必須接受的CSS Grid的局限性之一。

查看Geoff Graham的“網(wǎng)格密集關(guān)鍵字的自動(dòng)流動(dòng)能力”，了解grid-auto-flow: dense的介紹以及它如何運(yùn)行的示例。

指定跨度的幾種方法

有幾種方法可以指示項(xiàng)目應(yīng)跨越多少列。最簡單的方法是將grid-columns: span [n]應(yīng)用于其中一個(gè)項(xiàng)目，其中n是元素將跨越的列數(shù)。我們布局中的第三個(gè)項(xiàng)目具有grid-column: span 2，這解釋了為什么它的寬度是僅跨越一列的其他項(xiàng)目的兩倍。

其他方法需要您顯式定義網(wǎng)格線。網(wǎng)格線的編號系統(tǒng)如下：

可以使用正值（例如1、2、3）或負(fù)值（例如-1、-2、-3）從左到右指定網(wǎng)格線，以從右到左進(jìn)行。這些可用于使用grid-column屬性在網(wǎng)格上放置項(xiàng)目，如下所示：

<code>.grid-item {
  grid-column: (起始軌道) / (結(jié)束軌道);
}</code>

因此，這為我們提供了指定跨越項(xiàng)目的其他方法。這尤其靈活，因?yàn)槠鹗贾祷蚪Y(jié)束值都可以替換為span關(guān)鍵字。例如，上面示例中的三列藍(lán)色框可以通過向第八個(gè)網(wǎng)格項(xiàng)目添加以下任何內(nèi)容來創(chuàng)建：

• grid-column: 3 / 6
• grid-column: -4 / -1
• grid-column: 3 / span 3
• grid-column: -4 / span 3
• grid-column: span 3 / -1
• 等等

在非響應(yīng)式（即固定列）網(wǎng)格上，所有這些都會(huì)產(chǎn)生相同的效果（如上圖中的藍(lán)色框），但是，如果網(wǎng)格是響應(yīng)式的并且列數(shù)發(fā)生變化，它們的差異就會(huì)開始顯現(xiàn)。某些列跨度會(huì)破壞具有自動(dòng)流動(dòng)網(wǎng)格的布局，使這兩種技術(shù)看起來不相容。幸運(yùn)的是，有一些解決方案可以讓我們成功地將兩者結(jié)合起來。

但是，首先，我們需要了解問題。

溢出側(cè)滾動(dòng)問題

以下是使用上述符號創(chuàng)建的一些特色區(qū)域：

在全寬（五列）時(shí)，一切看起來都很好，但當(dāng)調(diào)整大小到應(yīng)該是兩列時(shí)，布局會(huì)像這樣中斷：

如您所見，我們的網(wǎng)格失去了響應(yīng)能力，盡管容器已縮小，但網(wǎng)格試圖保持所有五列。為此，它放棄了嘗試保持等寬列，并且網(wǎng)格從其容器的右側(cè)溢出，導(dǎo)致水平滾動(dòng)。

這是為什么？問題是瀏覽器試圖遵守我們命名的顯式網(wǎng)格線。在這個(gè)寬度下，自動(dòng)適應(yīng)網(wǎng)格應(yīng)該隱式地顯示兩列，但是我們的網(wǎng)格線編號系統(tǒng)通過顯式引用第五條網(wǎng)格線與之相矛盾。這種矛盾導(dǎo)致混亂。為了正確顯示我們隱式的兩列網(wǎng)格，唯一允許的行號是1、2和3以及-3、-2、-1，如下所示：

但是，如果我們的任何網(wǎng)格項(xiàng)目包含位于此范圍之外的grid-column引用，例如網(wǎng)格線編號4、5或6（或-4、-5或-6），則瀏覽器會(huì)收到混合消息。一方面，我們要求它自動(dòng)創(chuàng)建靈活的列（這應(yīng)該隱式地為我們提供此屏幕寬度下的兩列），但我們還顯式地引用了在兩列網(wǎng)格中未出現(xiàn)的網(wǎng)格線。當(dāng)隱式（自動(dòng)）列和顯式列數(shù)之間存在沖突時(shí)，網(wǎng)格始終偏向于顯式網(wǎng)格；因此會(huì)出現(xiàn)不需要的列和水平溢出（這也恰當(dāng)?shù)乇环Q為CSS數(shù)據(jù)丟失）。就像使用網(wǎng)格線編號一樣，跨度也可以創(chuàng)建顯式列。因此，grid-column: span 3（演示中的第八個(gè)網(wǎng)格項(xiàng)目）強(qiáng)制網(wǎng)格顯式采用至少三列，而我們希望它隱式顯示兩列。

在這一點(diǎn)上，似乎唯一前進(jìn)的道路是使用媒體查詢在我們的布局中斷的寬度處更改grid-column值——但不要太快！這正是我一開始的假設(shè)。但是，在更仔細(xì)地考慮并嘗試各種選項(xiàng)之后，我發(fā)現(xiàn)有一些有限的解決方法可以一直向下工作到兩列，只留下一個(gè)媒體查詢來處理最窄屏幕上的單列布局。

解決方案

我意識到，訣竅是只使用您打算顯示的最窄網(wǎng)格中出現(xiàn)的網(wǎng)格線來指定跨度。在這種情況下，是兩列網(wǎng)格。（我們將使用媒體查詢來處理最窄屏幕上的單列場景。）這意味著我們可以安全地使用網(wǎng)格線1、2和3（或-3、-2和-1）而不會(huì)破壞網(wǎng)格。

我最初認(rèn)為這意味著將自己限制在最多兩列的跨度，使用以下組合：

• grid column: span 2
• grid-column: 1 /3
• grid-column: -3 / -1

這在一直到兩列的范圍內(nèi)都保持完美的響應(yīng)能力：

雖然這有效，但從設(shè)計(jì)的角度來看，它相當(dāng)有限，而且不是特別令人興奮。我希望能夠創(chuàng)建在大型屏幕上為三列、四列甚至五列寬的跨度。但是怎樣呢？我的第一個(gè)想法是我必須求助于媒體查詢（天哪，舊習(xí)慣很難改?。以噲D擺脫這種方法并以不同的方式思考響應(yīng)式設(shè)計(jì)。

再次查看我們僅使用1到3和-3到-1可以做什么，我逐漸意識到我可以混合使用網(wǎng)格列的起始值和結(jié)束值的正數(shù)和負(fù)數(shù)，例如1/-3和2/-2。乍一看，這似乎不是很令人感興趣。當(dāng)您意識到這些線條在調(diào)整網(wǎng)格大小時(shí)的位置時(shí)，情況就會(huì)發(fā)生變化：這些跨越的元素會(huì)隨著屏幕大小的變化而改變寬度。這為響應(yīng)式列跨度開辟了一整套新的可能性：隨著屏幕變寬，將跨越不同列數(shù)的項(xiàng)目，而無需媒體查詢。

我發(fā)現(xiàn)的第一個(gè)例子是grid-column: 1/-1。這使得項(xiàng)目像一個(gè)全寬橫幅一樣，在所有列數(shù)下都從第一列跨越到最后一列。它甚至適用于一列寬！

通過使用grid-column: 1/-2，可以創(chuàng)建一個(gè)左對齊的幾乎全寬跨度，它始終會(huì)在其右側(cè)留下一列項(xiàng)目。當(dāng)縮小到兩列時(shí)，它會(huì)響應(yīng)式地縮小到一列。令人驚訝的是，當(dāng)縮小到單列布局時(shí)，它甚至也能工作。（原因似乎是網(wǎng)格不會(huì)將項(xiàng)目壓縮到零寬度，因此它保持一列寬，grid-column: 1/1也是如此。）我假設(shè)grid-column: 2/-1的工作方式類似，但與右側(cè)邊緣對齊，并且在大多數(shù)情況下確實(shí)如此，除了單列顯示時(shí)會(huì)導(dǎo)致溢出。

接下來我嘗試了1/-3，它在較寬的屏幕上工作得很好，顯示至少三列，在較小的屏幕上顯示一列。我認(rèn)為它在兩列網(wǎng)格上會(huì)做一些奇怪的事情，因?yàn)榈谝粭l網(wǎng)格線與-3的網(wǎng)格線相同。令我驚訝的是，它仍然作為單列項(xiàng)目正常顯示。

經(jīng)過大量的嘗試，我找到了十一個(gè)可能的網(wǎng)格列值，使用了來自兩列網(wǎng)格的網(wǎng)格線編號。令人驚訝的是，其中三個(gè)一直到單列布局都能正常工作。另外七個(gè)可以一直向下工作到兩列，只需要一個(gè)媒體查詢來處理單列顯示。

這是完整的列表：

如您所見，雖然這是所有可能的響應(yīng)式跨度的有限子集，但實(shí)際上有很多可能性。

• 2/-2很有趣，因?yàn)樗鼊?chuàng)建了一個(gè)居中的跨度，一直到一列都能正常工作！
• 3/-1最沒用，因?yàn)樗词乖趦闪星闆r下也會(huì)導(dǎo)致溢出。
• 3/-3是一個(gè)驚喜。

通過使用此列表中的各種grid-column值，可以創(chuàng)建有趣且完全響應(yīng)的布局。對于最窄的單列顯示，使用單個(gè)媒體查詢，我們可以使用十種不同的網(wǎng)格列跨度模式。

單列媒體查詢通常也很簡單。此最終演示上的一個(gè)在較小的屏幕上恢復(fù)使用flexbox：

<code>@media (max-width: 680px) {
  .archive {
    display: flex;
    flex-direction: column;
  }

  .article {
    margin-bottom: 2em;
  }
}</code>

這是最終網(wǎng)格，如您所見，它從一列到五列都是完全響應(yīng)式的：

使用 :nth-child() 重復(fù)可變長度顯示

我用來將代碼減少到二十幾行的最后一個(gè)技巧是:nth-child(n)選擇器，我用它來設(shè)置網(wǎng)格中的多個(gè)項(xiàng)目樣式。我希望我的跨度樣式應(yīng)用于我的Feed中的多個(gè)項(xiàng)目，以便特色帖子框定期出現(xiàn)在頁面中。首先，我使用了逗號分隔的選擇器列表，如下所示：

<code>.article:nth-child(2),
.article:nth-child(18),
.article:nth-child(34),
.article:nth-child(50)  {
  background-color: rgba(128,0,64,0.8);
  grid-column: -3 / -1;
}</code>

但我很快發(fā)現(xiàn)這很麻煩，尤其是我必須為我想在每篇文章中設(shè)置樣式的每個(gè)子元素重復(fù)此列表——例如標(biāo)題、鏈接等等。在原型設(shè)計(jì)期間，如果我想玩弄跨越元素的位置，我必須手動(dòng)更改這些列表中的數(shù)字，這既費(fèi)力又容易出錯(cuò)。

那時(shí)我意識到我可以使用強(qiáng)大的功能:nth-child偽選擇器，而不是像我在上面的列表中使用的那樣簡單的整數(shù)。:nth-child(n)也可以采用等式，例如:nth-child(2n 2)，它將定位每個(gè)第二個(gè)子元素。

以下是如何使用:nth-child([公式])在我的網(wǎng)格中創(chuàng)建藍(lán)色全寬面板，這些面板出現(xiàn)在頁面的頂部，并在頁面下方重復(fù)出現(xiàn)：

<code>.article:nth-child(31n   1) {
  grid-column: 1 / -1;
  background: rgba(11, 111, 222, 0.5);
}</code>

括號中的位 (31n 1) 確保選擇第1個(gè)、第32個(gè)、第63個(gè)等子項(xiàng)。瀏覽器運(yùn)行一個(gè)循環(huán)，從n=0開始（在這種情況下，31 0 1 = 1），然后是n=1（31 1 1 = 32），然后是n=2（31 * 2 1 = 63）。在最后一種情況下，瀏覽器意識到?jīng)]有第63個(gè)子項(xiàng)，因此它忽略該項(xiàng)，停止循環(huán)，并將CSS應(yīng)用于第1個(gè)和第32個(gè)子項(xiàng)。

我對從右到左交替出現(xiàn)的紫色框做了類似的操作：

<code>.article:nth-child(16n   2) {
  grid-column: -3 / -1;
  background: rgba(128, 0, 64, 0.8);
}

.article:nth-child(16n   10) {
  grid-column: 1 / -2;
  background: rgba(128, 0, 64, 0.8);
}</code>

第一個(gè)選擇器用于右側(cè)的紫色框。16n 2 確保樣式應(yīng)用于每第16個(gè)網(wǎng)格項(xiàng)目，從第二個(gè)項(xiàng)目開始。

第二個(gè)選擇器定位右側(cè)的框。它使用相同的間距 (16n)，但偏移量不同 ( 10)。結(jié)果，這些框會(huì)定期出現(xiàn)在第10、26、42等網(wǎng)格項(xiàng)目的右側(cè)。

當(dāng)涉及到這些網(wǎng)格項(xiàng)目及其內(nèi)容的視覺樣式時(shí)，我使用了另一個(gè)技巧來減少重復(fù)。對于兩個(gè)框共享的樣式（例如，background-color），可以使用單個(gè)選擇器來定位兩者：

<code>.article:nth-child(8n   2) {
  background: rgba(128, 0, 64, 0.8);
  /* 其他共享樣式 */
}</code>

這將定位項(xiàng)目 2、10、18、26、34、42、50等等。換句話說，它選擇左右兩個(gè)特色框。

它之所以有效是因?yàn)?8n 正好是 16n 的一半，并且因?yàn)閮蓚€(gè)單獨(dú)選擇器中使用的偏移量相差 8（即 10 和 2 之間的差是 8）

最后的想法

目前，CSS Grid 可用于使用最少的代碼創(chuàng)建靈活的響應(yīng)式網(wǎng)格，但這確實(shí)對在不使用媒體查詢的倒退步驟的情況下定位元素有一些重要的限制。

能夠指定不會(huì)在較小屏幕上強(qiáng)制溢出的跨度會(huì)很棒。目前，我們實(shí)際上是告訴瀏覽器，“請創(chuàng)建一個(gè)響應(yīng)式網(wǎng)格”，它做得非常漂亮。但是當(dāng)我們繼續(xù)說，“哦，并且使這個(gè)網(wǎng)格項(xiàng)目跨越四列”時(shí)，它會(huì)在窄屏幕上發(fā)脾氣，優(yōu)先考慮四列跨度請求而不是響應(yīng)式網(wǎng)格。能夠告訴網(wǎng)格優(yōu)先考慮響應(yīng)能力而不是我們的跨度請求會(huì)很棒。類似這樣：

<code>.article {
  grid-column: span 3, autofit;
}</code>

響應(yīng)式網(wǎng)格的另一個(gè)問題是最后一行。隨著屏幕寬度的變化，最后一行經(jīng)常不會(huì)被填充。我花了很長時(shí)間尋找一種方法來使最后一個(gè)網(wǎng)格項(xiàng)目跨越（并因此填充）剩余的列，但目前看來您無法在Grid中做到這一點(diǎn)。如果我們可以使用像auto這樣的關(guān)鍵字來指定項(xiàng)目的起始位置，那就太好了，這意味著“請將左邊緣放在它落下的任何位置”。類似這樣：

<code>.article {
  grid-column: auto, -1;
}</code>

……這將使左邊緣跨越到行的末尾。

以上是僅20行CSS中的響應(yīng)式網(wǎng)格雜志布局的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！