建站
咨詢
售后
建站咨詢
新聞中心
不要重復(fù)自己
通過 grid-template-columns 和 grid-template-rows 屬性，我們可以顯式地設(shè)置網(wǎng)格中的行數(shù)和列數(shù)，并指定它們的大小。如果我們希望多行和/或多列的大小相同，這可能會(huì)變得重復(fù)。
repeat()函數(shù)可以將我們從重復(fù)中解救出來。舉個(gè)例子，我們可能會(huì)這么寫：
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;使用repeat()，可以這么寫：
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)隔開。第一個(gè)參數(shù)代表"計(jì)數(shù)"，第二個(gè)參數(shù)代表"軌道"：repeat(
第一個(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è)跊]有媒體查詢的響應(yīng)式布局中非常方便。下面我們將對(duì)它們進(jìn)行詳細(xì)介紹。
第二個(gè)參數(shù)指定了要重復(fù)的軌道數(shù)。可選值包括：
- 長度值，可使用單位包括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)，它們看起來可能有點(diǎn)混亂，尤其是當(dāng)幾個(gè)選項(xiàng)組合在一起的時(shí)候。在此，我們將盡量把事情簡(jiǎn)單化，以免陷入混亂。在大多數(shù)情況下，軌道參數(shù)是相當(dāng)簡(jiǎn)單和直觀的。
設(shè)置重復(fù)列
在探索 repeat() 可以使用的各種參數(shù)之前，值得注意的是 repeat() 可以用來創(chuàng)建列模式。
例如，請(qǐng)看下面這段有六列網(wǎng)格的超長代碼：
article {
grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
}可以使用repeat()這么改寫：
article {
grid-template-columns: repeat(3, 1fr 2fr);
}這會(huì)告訴瀏覽器重復(fù)一個(gè)模式三次--先是 1fr 寬的一列，然后是 2fr 寬的一列。
圖片
使用長度值
我們已經(jīng)在 repeat() 中使用過 1fr 的長度值。使用 fr 單位的好處是，它可以根據(jù)可用空間確定軌道的大小，而無需擔(dān)心可用空間的多少。不過，我們也可以根據(jù)需要使用其他長度單位。
例如，讓我們?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，因此每一列的寬度與其包含的最長單詞一樣寬：
article {
grid-template-columns: repeat(3, min-content);
}圖片
使用max-content關(guān)鍵字
max-content 關(guān)鍵字的作用基本上與 min-content 相反：它根據(jù)網(wǎng)格單元格中最大的內(nèi)容來確定軌道大小。在下面的演示中，列寬以內(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ì)開始溢出容器。(也就是說，文本無法再繼續(xù)被包覆）。
注意：auto 只有在與其他值混合時(shí)才會(huì)出現(xiàn)上述行為。如果單獨(dú)使用 repeat(3, auto)，其行為就像我們?cè)O(shè)置 repeat(3, 1fr) 一樣。
使用minmax()函數(shù)
minmax() 函數(shù)本身需要兩個(gè)參數(shù)--最小值和最大值，中間用逗號(hào)隔開。因此，通過 minmax()，我們可以在靈活的環(huán)境中為軌道設(shè)置一系列可能的尺寸。
例如，我們可以將一列設(shè)置為 minmax(40px, 100px)，這意味著其最小寬度為 40px，最大寬度為 100px。
minmax() 的兩個(gè)參數(shù)都可以使用長度值，如 fr、px、em、% 和 ch，以及 min-content、max-content 和 auto。不過，最好至少為一個(gè)參數(shù)使用長度值，因?yàn)殛P(guān)鍵字不應(yīng)該同時(shí)作為兩個(gè)參數(shù)工作（不過我發(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ì)開始脫離容器。我們很快就會(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)境中非常有用。
比如說：
article {
grid-template-columns: repeat(5, minmax(min(60px, 8vw), 1fr));
}圖片
上面的代碼設(shè)置了五列。在寬屏幕瀏覽器上，五列的間距均為 1fr。在較窄的設(shè)備上，列會(huì)越來越窄。一旦達(dá)到 60px 和 8vw 之間的較低值，就會(huì)停止縮小。因此，在窄屏幕上，我們?nèi)匀粫?huì)發(fā)現(xiàn)內(nèi)容懸掛在容器外；要做到完全響應(yīng)式，還有很長的路要走。
如果你覺得 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ù)代表軌道可增長到的最大尺寸。fit-content() 可以接收任何長度值，如 fr、px、em、% 和 ch。
比如說，如果我們?cè)O(shè)置了三列，并設(shè)置了 fit-content(120px)，那么列寬在 120px 之前都將是響應(yīng)式的：
article {
grid-template-columns: repeat(3, fit-content(120px));
}圖片
使用命名線
在網(wǎng)格布局中，軌道周圍的垂直線和水平線默認(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）稱為"sidebar"，中間的網(wǎng)格線（數(shù)字 2）稱為"content-start"，最后的網(wǎng)格線（數(shù)字 3）稱為 "content-end"。
我們還可以在 repeat() 函數(shù)中使用命名線：
article {
grid-template-columns: repeat(5, [yin] 1fr [yang]);
}這意味著，現(xiàn)在我們的每一列左邊都有一條線稱為"yin"，右邊都有一條線稱為"yang"。
圖片
如果每一行都有相同的名稱，似乎會(huì)增加工作難度，但我們?nèi)匀豢梢詫⑺鼈兎謩e作為目標(biāo)。例如：
- 我們可以用 grid-column: yin 來定位第一條yin線
- 我們可以用 grid-column: yin 2 來定位第二條yin線
- 我們可以設(shè)置一列從第二條yin線起跨三行： grid-column: yin 2 / span 3
- 我們可以通過 grid-column: yin 2 / yang -1 設(shè)置一列，從第二條yin線開始，一直跨到末尾。
在 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，那些無法在一行中顯示的 div 會(huì)被放到下一行。如果我們將auto-fit改為auto-fill，就不會(huì)發(fā)現(xiàn)有什么不同，因?yàn)樵谶@種情況下，它們的作用是一樣的。它們之間的區(qū)別只有在特殊情況下才會(huì)顯現(xiàn)出來。
在這一點(diǎn)上，auto-fit和auto-fill都還不錯(cuò)，但沒有什么特別閃光的地方。當(dāng)它們與 minmax() 和 min() 結(jié)合使用時(shí)，真正的魔力才會(huì)開始發(fā)生，所以我們接著往下看。
結(jié)合使用
如果你還沒有愛上 repeat()，那么 repeat() 與 auto-fit、minmax() 和 min() 的結(jié)合一定會(huì)讓丘比特之箭射穿你頑固的心。通過它們的組合，我們無需使用媒體查詢即可創(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ì)展開以填充空間。如果我們拓寬瀏覽器，一旦又有 200 像素的空間，就會(huì)在行中添加另一個(gè) div。同樣的情況也會(huì)反過來發(fā)生：當(dāng)我們縮小瀏覽器時(shí)，一旦沒有至少 200px 的空間可以容納，行中的最后一個(gè) div 就會(huì)進(jìn)入下一行。一旦該 div 掉下去，其余的 div 就會(huì)展開以填滿該行。
同樣，如果我們把a(bǔ)uto-fit換成auto-fill，就會(huì)看到相同的行為。
不過，這個(gè)例子有一個(gè)限制。如果我們將瀏覽器窗口設(shè)置得足夠窄，最終就會(huì)出現(xiàn)單列。當(dāng)這一列的寬度小于 200px 時(shí)，div 就會(huì)開始溢出其容器。
圖片
我們可以通過引入 min() 來防止溢出，接下來我們就來看看它。
使用auto-fit，minmax()和min()
我們可以通過引入 min() 來控制小寬度下的情況。讓我們更新代碼，使其看起來像這樣：
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似乎沒有任何區(qū)別。區(qū)別只出現(xiàn)在某些情況下，我們現(xiàn)在就來簡(jiǎn)單介紹一下。
我們將剝離演示 HTML，使其只有四個(gè) div，并設(shè)置以下 CSS：
article {
grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
}下圖顯示了auto-fill后的效果。
圖片
瀏覽器正在計(jì)算容器中可以容納多少個(gè) div，并為它們留出空間?，F(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 展開以占據(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 一起作為較長聲明的一部分使用。我們?cè)谶@里遇到的大多數(shù)朋友--長度單位、min-content、max-content、auto、minmax()、fit-content() 和命名線--都可以與 repeat() 一起使用，也可以在其中使用。
有些組合是不允許使用軌跡參數(shù)的。例如，我們不能使用 repeat(auto-fill, 1fr) 這樣的參數(shù)。auto-fit 和彈性單位不能一起使用，因?yàn)槲覀冃枰谄渲心硞€(gè)地方使用固定的測(cè)量值，例如 minmax(100px, 1fr)。
正如我們所見，minmax() 函數(shù)可以嵌套 min() 或 max() 函數(shù)。它還可以包含 auto、min-content、max-content 中的一個(gè)，但不能包含兩個(gè)。例如，我們可以使用 minmax(50px, max-content)，但不能使用 minmax(min-content, max-content)（不過老實(shí)說，我發(fā)現(xiàn)這些組合中的某些似乎確實(shí)有效）。
repeat() 不能嵌套。因此，我們不能在 repeat() 中使用 repeat()。不過我們并排使用 repeat() 函數(shù)，例如 repeat(5, 1fr) 100px repeat(2, 50px)。
總結(jié)
repeat() 函數(shù)是一種非常有用的工具，可用于高效布局網(wǎng)格列和行的重復(fù)模式。只需一行代碼，它就能在不使用媒體查詢的情況下創(chuàng)建完全響應(yīng)式的布局。
在大多數(shù)情況下，你不需要對(duì) repeat() 進(jìn)行過多的深入研究。它最令人印象深刻的功能可以用這樣一個(gè)基本示例來概括：
repeat(auto-fit, minmax(min(50px, 100%), 1fr))請(qǐng)務(wù)必將這行代碼牢記于心，因?yàn)樗鼤?huì)派上大用場(chǎng)。
本文譯自：https://www.sitepoint.com/css-grid-repeat-function/
文章名稱：如何使用Grid中的repeat函數(shù)
URL標(biāo)題：http://fisionsoft.com.cn/article/dhcspec.html
