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

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

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

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

這種方法聽起來(lái)很有吸引力，但是當(dāng)我開始引入跨列元素時(shí)，我遇到了網(wǎng)格在窄屏幕上溢出的問(wèn)題。媒體查詢似乎是唯一解決方案。也就是說(shuō)，直到我找到一個(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)的寬度都相同（即沒(méi)有跨列）。

我想讓網(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è)簡(jiǎn)單的媒體查詢（或者如果您願(yuàn)意限制跨度選項(xiàng)，甚至無(wú)需媒體查詢）來(lái)定義響應(yīng)式雜誌/新聞樣式佈局。

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

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

所有這一切都只使用CSS實(shí)現(xiàn)，並且只有一個(gè)媒體查詢來(lái)處理最窄屏幕（即小於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)容，例如最新文章小部件、存檔頁(yè)面或搜索結(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>

請(qǐng)注意，行高會(huì)自動(dòng)調(diào)整以適應(yīng)行中最高的內(nèi)容。如果您更改Pen的寬度，您將看到項(xiàng)目流暢地增長(zhǎ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ì)隨著不同屏幕寬度的變化而增長(zhǎng)和縮小，但始終保持五列，導(dǎo)致它們?cè)谛∑聊簧献兊梅浅Ｕ?。第一個(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像素寬的列。如果剩餘空間，列將通過(guò)在它們之間共享剩餘空間而平均增長(zhǎng)——這就是1fr值所說(shuō)的：使列成為可用寬度的相等分?jǐn)?shù)。

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

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

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

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

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

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

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

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

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

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

指定跨度的幾種方法

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

其他方法需要您顯式定義網(wǎng)格線。網(wǎng)格線的編號(hào)系統(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)色框可以通過(guò)向第八個(gè)網(wǎng)格項(xiàng)目添加以下任何內(nèi)容來(lá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ù)看起來(lái)不相容。幸運(yùn)的是，有一些解決方案可以讓我們成功地將兩者結(jié)合起來(lái)。

但是，首先，我們需要了解問(wèn)題。

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

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

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

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

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

但是，如果我們的任何網(wǎng)格項(xiàng)目包含位於此範(fàn)圍之外的grid-column引用，例如網(wǎng)格線編號(hào)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)格線編號(hào)一樣，跨度也可以創(chuàng)建顯式列。因此， grid-column: span 3 （演示中的第八個(gè)網(wǎng)格項(xiàng)目）強(qiáng)製網(wǎng)格顯式採(cǎi)用至少三列，而我們希望它隱式顯示兩列。

在這一點(diǎn)上，似乎唯一前進(jìn)的道路是使用媒體查詢?cè)谖覀兊膩丫种袛嗟膶挾忍幐?code>grid-column值——但不要太快！這正是我一開始的假設(shè)。但是，在更仔細(xì)地考慮並嘗試各種選項(xiàng)之後，我發(fā)現(xiàn)有一些有限的解決方法可以一直向下工作到兩列，只留下一個(gè)媒體查詢來(lái)處理最窄屏幕上的單列佈局。

解決方案

我意識(shí)到，訣竅是只使用您打算顯示的最窄網(wǎng)格中出現(xiàn)的網(wǎng)格線來(lái)指定跨度。在這種情況下，是兩列網(wǎng)格。 （我們將使用媒體查詢來(lái)處理最窄屏幕上的單列場(chǎ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

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

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

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

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

通過(guò)使用grid-column: 1/-2 ，可以創(chuàng)建一個(gè)左對(duì)齊的幾乎全寬跨度，它始終會(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è)邊緣對(duì)齊，並且在大多數(shù)情況下確實(shí)如此，除了單列顯示時(shí)會(huì)導(dǎo)致溢出。

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

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

這是完整的列表：

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

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

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

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

 <code>@media (max-width: 680px) { .archive { display: flex; flex-direction: column; } .article { margin-bottom: 2em; } }</code>

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

使用:nth-child() 重複可變長(zhǎng)度顯示

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

 <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è)子元素重複此列表——例如標(biāo)題、鏈接等等。在原型設(shè)計(jì)期間，如果我想玩弄跨越元素的位置，我必須手動(dòng)更改這些列表中的數(shù)字，這既費(fèi)力又容易出錯(cuò)。

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

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

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

括號(hào)中的位(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）。在最後一種情況下，瀏覽器意識(shí)到?jīng)]有第63個(gè)子項(xiàng)，因此它忽略該項(xiàng)，停止循環(huán)，並將CSS應(yīng)用於第1個(gè)和第32個(gè)子項(xiàng)。

我對(duì)從右到左交替出現(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)容的視覺(jué)樣式時(shí)，我使用了另一個(gè)技巧來(lái)減少重複。對(duì)於兩個(gè)框共享的樣式（例如， background-color ），可以使用單個(gè)選擇器來(lái)定位兩者：

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

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

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

最後的想法

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

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

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

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

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

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

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