不要重復(fù)自己

通過(guò) grid-template-columns 和 grid-template-rows 屬性，我們可以顯式地設(shè)置網(wǎng)格中的行數(shù)和列數(shù)，并指定它們的大小。如果我們希望多行和/或多列的大小相同，這可能會(huì)變得重復(fù)。

repeat()函數(shù)可以將我們從重復(fù)中解救出來(lái)。舉個(gè)例子，我們可能會(huì)這么寫(xiě)：

grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

使用repeat()，可以這么寫(xiě)：

grid-template-columns: repeat(5, 1fr);

在上面的例子中，repeat()函數(shù)可以讓我們指定需要多少列（5列），以及列的大?。?fr，即可用空間的幾分之一）。

這樣，我們的代碼就會(huì)更高效、更易讀。這只是一個(gè)簡(jiǎn)單的例子。下面我們將看到，我們還可以用 repeat() 函數(shù)做很多事情。

下面的截圖顯示了上述代碼的一個(gè)簡(jiǎn)單演示。一篇包含十個(gè) div 的文章分為五列。

圖片

repeat函數(shù)的的選項(xiàng)

實(shí)際上，我們可以在 repeat() 的括號(hào)內(nèi)做很多事情。它接收兩個(gè)參數(shù)，中間用逗號(hào)隔開(kāi)。第一個(gè)參數(shù)代表"計(jì)數(shù)"，第二個(gè)參數(shù)代表"軌道"：repeat(<count>, <tracks>)。(軌道是一列或一行的通用名稱(chēng)）。

第一個(gè)參數(shù)可以是以下三種之一：

• 數(shù)字（比如1，2，3）
• auto-fit關(guān)鍵字
• auto-fill關(guān)鍵字

顯然，數(shù)字值設(shè)定了特定的軌道數(shù)。但是，auto-fit和auto-fill可以根據(jù)可用空間的大小，設(shè)置不同數(shù)量的軌道。這使得它們?cè)跊](méi)有媒體查詢(xún)的響應(yīng)式布局中非常方便。下面我們將對(duì)它們進(jìn)行詳細(xì)介紹。

第二個(gè)參數(shù)指定了要重復(fù)的軌道數(shù)。可選值包括：

• 長(zhǎng)度值，可使用單位包括fr、px、em、%和ch等等
• min-content關(guān)鍵字
• max-content關(guān)鍵字
• auto關(guān)鍵字
• minmax()函數(shù)，其可以嵌套min()或者max()函數(shù)
• fit-content()函數(shù)
• 命名線

正如你所看到的，這個(gè)參數(shù)有很多可能的選項(xiàng)，它們看起來(lái)可能有點(diǎn)混亂，尤其是當(dāng)幾個(gè)選項(xiàng)組合在一起的時(shí)候。在此，我們將盡量把事情簡(jiǎn)單化，以免陷入混亂。在大多數(shù)情況下，軌道參數(shù)是相當(dāng)簡(jiǎn)單和直觀的。

設(shè)置重復(fù)列

在探索 repeat() 可以使用的各種參數(shù)之前，值得注意的是 repeat() 可以用來(lái)創(chuàng)建列模式。

例如，請(qǐng)看下面這段有六列網(wǎng)格的超長(zhǎng)代碼：

article {
  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
}

可以使用repeat()這么改寫(xiě)：

article {
  grid-template-columns: repeat(3, 1fr 2fr);
}

這會(huì)告訴瀏覽器重復(fù)一個(gè)模式三次--先是 1fr 寬的一列，然后是 2fr 寬的一列。

圖片

使用長(zhǎng)度值

我們已經(jīng)在 repeat() 中使用過(guò) 1fr 的長(zhǎng)度值。使用 fr 單位的好處是，它可以根據(jù)可用空間確定軌道的大小，而無(wú)需擔(dān)心可用空間的多少。不過(guò)，我們也可以根據(jù)需要使用其他長(zhǎng)度單位。

例如，讓我們?cè)O(shè)置三列軌道，并賦予它們 120 像素的寬度：

article {
  grid-template-columns: repeat(3, 120px);
}

下面是結(jié)果：

圖片

現(xiàn)在列的寬度是固定的，即使容器太窄也不會(huì)改變。

使用min-content關(guān)鍵字

min-content 關(guān)鍵字可將軌道設(shè)置為與其最小內(nèi)容一樣寬或一樣高。在下面的演示中，我們有三列，每一列都設(shè)置為 min-content，因此每一列的寬度與其包含的最長(zhǎng)單詞一樣寬：

article {
  grid-template-columns: repeat(3, min-content);
}

圖片

使用max-content關(guān)鍵字

max-content 關(guān)鍵字的作用基本上與 min-content 相反：它根據(jù)網(wǎng)格單元格中最大的內(nèi)容來(lái)確定軌道大小。在下面的演示中，列寬以?xún)?nèi)容最多的單元格為基礎(chǔ)：

article {
  grid-template-columns: repeat(3, max-content);
}

圖片

使用auto關(guān)鍵字

與 repeat() 一起使用時(shí)，auto 關(guān)鍵字的最大值為 max-content，最小值為 min-content。

請(qǐng)看下面的列模式：

article {
  grid-template-columns: repeat(3, auto 1fr);
}

在這里，我們將有六列，每一奇數(shù)列的寬度設(shè)置為 auto。在下面的演示中，我們可以看到，在有足夠空間的情況下，帶有"auto"文本的 div 將在max-content時(shí)達(dá)到最大寬度，而 1fr div 則共享剩余空間。當(dāng)瀏覽器變窄時(shí)，"auto"列繼續(xù)變窄，直到達(dá)到min-content閾值。

圖片

在上面的演示中，只有當(dāng)每一列達(dá)到min-content閾值時(shí)，div 才會(huì)開(kāi)始溢出容器。(也就是說(shuō)，文本無(wú)法再繼續(xù)被包覆）。

注意：auto 只有在與其他值混合時(shí)才會(huì)出現(xiàn)上述行為。如果單獨(dú)使用 repeat(3, auto)，其行為就像我們?cè)O(shè)置 repeat(3, 1fr) 一樣。

使用minmax()函數(shù)

minmax() 函數(shù)本身需要兩個(gè)參數(shù)--最小值和最大值，中間用逗號(hào)隔開(kāi)。因此，通過(guò) minmax()，我們可以在靈活的環(huán)境中為軌道設(shè)置一系列可能的尺寸。

例如，我們可以將一列設(shè)置為 minmax(40px, 100px)，這意味著其最小寬度為 40px，最大寬度為 100px。

minmax() 的兩個(gè)參數(shù)都可以使用長(zhǎng)度值，如 fr、px、em、% 和 ch，以及 min-content、max-content 和 auto。不過(guò)，最好至少為一個(gè)參數(shù)使用長(zhǎng)度值，因?yàn)殛P(guān)鍵字不應(yīng)該同時(shí)作為兩個(gè)參數(shù)工作（不過(guò)我發(fā)現(xiàn)有時(shí)確實(shí)可以這樣做，例如 minmax(min-content,max-content)）。

下面代碼設(shè)置了五列，每一列的最小寬度為60px，最大寬度為1fr：

article {
  grid-template-columns: repeat(5, minmax(60px, 1fr));
}

圖片

在達(dá)到最小寬度 60px 之前，這種方法一直很有效。之后，內(nèi)容就會(huì)開(kāi)始脫離容器。我們很快就會(huì)看到如何獲得更好的效果。

使用min()或者max()

minmax() 函數(shù)的參數(shù)也可以是 min() 或 max() 函數(shù)。這兩個(gè)函數(shù)都接收兩個(gè)參數(shù)。min()函數(shù)應(yīng)用兩個(gè)值中較小的值，而 max() 函數(shù)應(yīng)用較大的值。這在響應(yīng)式環(huán)境中非常有用。

比如說(shuō)：

article {
  grid-template-columns: repeat(5, minmax(min(60px, 8vw), 1fr));
}

圖片

上面的代碼設(shè)置了五列。在寬屏幕瀏覽器上，五列的間距均為 1fr。在較窄的設(shè)備上，列會(huì)越來(lái)越窄。一旦達(dá)到 60px 和 8vw 之間的較低值，就會(huì)停止縮小。因此，在窄屏幕上，我們?nèi)匀粫?huì)發(fā)現(xiàn)內(nèi)容懸掛在容器外；要做到完全響應(yīng)式，還有很長(zhǎng)的路要走。

如果你覺(jué)得 minmax()、min() 和 max() 的組合在現(xiàn)階段有點(diǎn)令人失望，請(qǐng)堅(jiān)持住，它們的真正威力將在auto-fit和auto-fill時(shí)顯現(xiàn)。

使用fit-content()函數(shù)

fit-content()函數(shù)接收一個(gè)參數(shù)，該參數(shù)代表軌道可增長(zhǎng)到的最大尺寸。fit-content() 可以接收任何長(zhǎng)度值，如 fr、px、em、% 和 ch。

比如說(shuō)，如果我們?cè)O(shè)置了三列，并設(shè)置了 fit-content(120px)，那么列寬在 120px 之前都將是響應(yīng)式的：

article {
  grid-template-columns: repeat(3, fit-content(120px));
}

圖片

使用命名線

在網(wǎng)格布局中，軌道周?chē)拇怪本€和水平線默認(rèn)是編號(hào)的。在設(shè)置 grid-template-columns 和 grid-template-rows 時(shí)，我們可以為這些線命名。這樣，在網(wǎng)格上放置內(nèi)容時(shí)，就可以更容易地定位這些線（因?yàn)槲覀儾槐厝ビ?jì)算網(wǎng)格線）。

下面是一個(gè)示例。命名行是方括號(hào)（[]）中的點(diǎn)位：

article {
  grid-template-columns: [sidebar] 300px [content-start] 1fr [content-end];
}

上面的代碼提供了兩列。最左邊的垂直網(wǎng)格線（數(shù)字 1）稱(chēng)為"sidebar"，中間的網(wǎng)格線（數(shù)字 2）稱(chēng)為"content-start"，最后的網(wǎng)格線（數(shù)字 3）稱(chēng)為 "content-end"。

我們還可以在 repeat() 函數(shù)中使用命名線：

article {
  grid-template-columns: repeat(5, [yin] 1fr [yang]);
}

這意味著，現(xiàn)在我們的每一列左邊都有一條線稱(chēng)為"yin"，右邊都有一條線稱(chēng)為"yang"。

圖片

如果每一行都有相同的名稱(chēng)，似乎會(huì)增加工作難度，但我們?nèi)匀豢梢詫⑺鼈兎謩e作為目標(biāo)。例如：

• 我們可以用 grid-column: yin 來(lái)定位第一條yin線
• 我們可以用 grid-column: yin 2 來(lái)定位第二條yin線
• 我們可以設(shè)置一列從第二條yin線起跨三行： grid-column: yin 2 / span 3
• 我們可以通過(guò) grid-column: yin 2 / yang -1 設(shè)置一列，從第二條yin線開(kāi)始，一直跨到末尾。

在 repeat() 中命名線可能在 repeat() 與其他值混合時(shí)最有用，比如這樣：

article {
  grid-template-columns: [main-start] auto repeat(5, [yin] 1fr [yang]) [sidebar] 300px [main-end];
}

圖片

更多的命名線[1]內(nèi)容可以查看MDN。

使用auto-fit和auto-fill

auto-fit和auto-fill關(guān)鍵字是設(shè)置固定軌道數(shù)的替代方法。它們告訴瀏覽器在給定空間內(nèi)盡可能多地填充軌道。例如：

article {
  grid-template-columns: repeat(auto-fit, 150px);
}

圖片

在上面的演示中，div 的寬度被設(shè)置為 150px，那些無(wú)法在一行中顯示的 div 會(huì)被放到下一行。如果我們將auto-fit改為auto-fill，就不會(huì)發(fā)現(xiàn)有什么不同，因?yàn)樵谶@種情況下，它們的作用是一樣的。它們之間的區(qū)別只有在特殊情況下才會(huì)顯現(xiàn)出來(lái)。

在這一點(diǎn)上，auto-fit和auto-fill都還不錯(cuò)，但沒(méi)有什么特別閃光的地方。當(dāng)它們與 minmax() 和 min() 結(jié)合使用時(shí)，真正的魔力才會(huì)開(kāi)始發(fā)生，所以我們接著往下看。

結(jié)合使用

如果你還沒(méi)有愛(ài)上 repeat()，那么 repeat() 與 auto-fit、minmax() 和 min() 的結(jié)合一定會(huì)讓丘比特之箭射穿你頑固的心。通過(guò)它們的組合，我們無(wú)需使用媒體查詢(xún)即可創(chuàng)建真正的響應(yīng)式布局。

使用auto-fit和minmax()

請(qǐng)看下列CSS：

article {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

在當(dāng)前示例中，minmax()設(shè)置了最大列寬為200px，最小列寬為1fr。

圖片

每個(gè) div 的寬度必須至少為 200px。如果右側(cè)有額外空間（小于 200 像素），div 會(huì)展開(kāi)以填充空間。如果我們拓寬瀏覽器，一旦又有 200 像素的空間，就會(huì)在行中添加另一個(gè) div。同樣的情況也會(huì)反過(guò)來(lái)發(fā)生：當(dāng)我們縮小瀏覽器時(shí)，一旦沒(méi)有至少 200px 的空間可以容納，行中的最后一個(gè) div 就會(huì)進(jìn)入下一行。一旦該 div 掉下去，其余的 div 就會(huì)展開(kāi)以填滿該行。

同樣，如果我們把a(bǔ)uto-fit換成auto-fill，就會(huì)看到相同的行為。

不過(guò)，這個(gè)例子有一個(gè)限制。如果我們將瀏覽器窗口設(shè)置得足夠窄，最終就會(huì)出現(xiàn)單列。當(dāng)這一列的寬度小于 200px 時(shí)，div 就會(huì)開(kāi)始溢出其容器。

圖片

我們可以通過(guò)引入 min() 來(lái)防止溢出，接下來(lái)我們就來(lái)看看它。

使用auto-fit，minmax()和min()

我們可以通過(guò)引入 min() 來(lái)控制小寬度下的情況。讓我們更新代碼，使其看起來(lái)像這樣：

article {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

現(xiàn)在，最小列寬有兩個(gè)選項(xiàng)。瀏覽器會(huì)選擇最小值。一旦列的寬度小于 200px，100% 就是較小的值，因此以它為準(zhǔn)。這意味著剩下的一列現(xiàn)在被設(shè)置為寬度：100%，因此在寬度不斷減小的情況下，它仍能很好地適應(yīng)其容器。

auto-fit和auto-fill的區(qū)別

在我們目前看到的示例中，auto-fit和auto-fill似乎沒(méi)有任何區(qū)別。區(qū)別只出現(xiàn)在某些情況下，我們現(xiàn)在就來(lái)簡(jiǎn)單介紹一下。

我們將剝離演示 HTML，使其只有四個(gè) div，并設(shè)置以下 CSS：

article {
  grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
}

下圖顯示了auto-fill后的效果。

圖片

瀏覽器正在計(jì)算容器中可以容納多少個(gè) div，并為它們留出空間。現(xiàn)有的每個(gè) div 都有 110px 寬，左側(cè)和右側(cè)的空間也是如此。

讓我們切換到auto-fit：

article {
  grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
}

下圖顯示了auto-fit后的效果。

圖片

使用auto-fit功能時(shí)，瀏覽器也會(huì)為更多的 div 計(jì)算空間，但隨后會(huì)將空間折疊為零寬度，并讓現(xiàn)有的 div 展開(kāi)以占據(jù)所有空間。在上圖中，你可以看到末端列行的編號(hào)仍然是 8，而 8 則堆疊在網(wǎng)格行 7、6 和 5 的上方。

那么我們?cè)撊绾慰创@一切呢？實(shí)際上，在大多數(shù)甚至所有情況下，我們都希望使用auto-fit功能，因?yàn)槲覀儾⒉唤?jīng)常希望在可以用于內(nèi)容的空間保持空閑。

關(guān)于 repeat() 的實(shí)用知識(shí)

如上所述，repeat()函數(shù)可與 grid-template-columns 和 grid-template-rows 一起作為較長(zhǎng)聲明的一部分使用。我們?cè)谶@里遇到的大多數(shù)朋友--長(zhǎng)度單位、min-content、max-content、auto、minmax()、fit-content() 和命名線--都可以與 repeat() 一起使用，也可以在其中使用。

有些組合是不允許使用軌跡參數(shù)的。例如，我們不能使用 repeat(auto-fill, 1fr) 這樣的參數(shù)。auto-fit 和彈性單位不能一起使用，因?yàn)槲覀冃枰谄渲心硞€(gè)地方使用固定的測(cè)量值，例如 minmax(100px, 1fr)。

正如我們所見(jiàn)，minmax() 函數(shù)可以嵌套 min() 或 max() 函數(shù)。它還可以包含 auto、min-content、max-content 中的一個(gè)，但不能包含兩個(gè)。例如，我們可以使用 minmax(50px, max-content)，但不能使用 minmax(min-content, max-content)（不過(guò)老實(shí)說(shuō)，我發(fā)現(xiàn)這些組合中的某些似乎確實(shí)有效）。

repeat() 不能嵌套。因此，我們不能在 repeat() 中使用 repeat()。不過(guò)我們并排使用 repeat() 函數(shù)，例如 repeat(5, 1fr) 100px repeat(2, 50px)。

總結(jié)

repeat() 函數(shù)是一種非常有用的工具，可用于高效布局網(wǎng)格列和行的重復(fù)模式。只需一行代碼，它就能在不使用媒體查詢(xún)的情況下創(chuàng)建完全響應(yīng)式的布局。

在大多數(shù)情況下，你不需要對(duì) repeat() 進(jìn)行過(guò)多的深入研究。它最令人印象深刻的功能可以用這樣一個(gè)基本示例來(lái)概括：

repeat(auto-fit, minmax(min(50px, 100%), 1fr))

請(qǐng)務(wù)必將這行代碼牢記于心，因?yàn)樗鼤?huì)派上大用場(chǎng)。

本文譯自：https://www.sitepoint.com/css-grid-repeat-function/