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

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

該插件的默認(rèn)列表UI相當(dāng)平淡無(wú)奇，所以我想將其樣式設(shè)計(jì)成類(lèi)似報(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)的所有麻煩嗎？

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

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

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)單的媒體查詢（或者如果您愿意限制跨度選項(xiàng)，甚至無(wú)需媒體查詢）來(lái)定義響應(yīng)式雜志/新聞樣式布局。

這是一個(gè)視覺(jué)效果，顯示了開(kāi)箱即用的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功能添加到我們想要占據(jù)更多空間的網(wǎng)格項(xiàng)目中。例如，如果我們希望列表中的第三個(gè)項(xiàng)目為兩列寬，我們可以添加：

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

但是，一旦我們開(kāi)始添加跨度，就會(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ì)開(kāi)始顯現(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)目包含位于此范圍之外的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(chēng)為CSS數(shù)據(jù)丟失）。就像使用網(wǎng)格線編號(hào)一樣，跨度也可以創(chuàng)建顯式列。因此，grid-column: span 3（演示中的第八個(gè)網(wǎng)格項(xiàng)目）強(qiáng)制網(wǎng)格顯式采用至少三列，而我們希望它隱式顯示兩列。

在這一點(diǎn)上，似乎唯一前進(jìn)的道路是使用媒體查詢?cè)谖覀兊牟季种袛嗟膶挾忍幐?code>grid-column值——但不要太快！這正是我一開(kāi)始的假設(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

這在一直到兩列的范圍內(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)式列跨度開(kāi)辟了一整套新的可能性：隨著屏幕變寬，將跨越不同列數(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的工作方式類(lèi)似，但與右側(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() 重復(fù)可變長(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è)子元素重復(fù)此列表——例如標(biāo)題、鏈接等等。在原型設(shè)計(jì)期間，如果我想玩弄跨越元素的位置，我必須手動(dòng)更改這些列表中的數(shù)字，這既費(fèi)力又容易出錯(cuò)。

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

以下是如何使用:nth-child([公式])在我的網(wǎng)格中創(chuàng)建藍(lán)色全寬面板，這些面板出現(xiàn)在頁(yè)面的頂部，并在頁(yè)面下方重復(fù)出現(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開(kāi)始（在這種情況下，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)的紫色框做了類(lèi)似的操作：

<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)目開(kāi)始。

第二個(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)減少重復(fù)。對(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)?8n 正好是 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ì)很棒。類(lèi)似這樣：

<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)將左邊緣放在它落下的任何位置”。類(lèi)似這樣：

<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)文章！