如何使用CSS網格重複（）函數

在本文中，我們將探討CSS GRID重複（）函數的所有可能性，這使我們能夠有效地創建網格列和行的模式，甚至可以在沒有媒體查詢的情況下創建響應式佈局。

鑰匙要點

'repot（）`函數簡化了網格模式的創建，允許以簡潔的方式規範列或行及其大小的規格，從而增強代碼可讀性和效率。

>
• >它支持各種尺寸選項，例如固定長度（`px`，'em`，`％`，`fr'），基於內容的關鍵字（``min-content'，'max-content' ）和靈活性`自動`關鍵字，在響應式設計中提供多功能性。
• >該功能可以與``auto-fit''和`auto-fill'關鍵字集成，以自動根據容器的寬度調整網格軌道的數量，這對於創建沒有媒體查詢的流體，響應的佈局至關重要。
>利用`minmax（）`in repoy（）`提供了一種強大的方法來定義軌道大小的範圍，從而確保內容在不同的視口尺寸上平穩地適應。 >
• 可以在“ repot（）”中定義
命名線，在網格項目的精確放置中有助於，並增強網格結構的可維護性。 >
• `repot（）`不能嵌套在自身中，但是可以與其他值和功能一起使用，以有效地創建複雜和響應的網格佈局。
>
不要重複（）自己
網格板柱和網格板行屬性允許我們在網格中明確設置所需的行和列的數量，並指定應如何尺寸。如果我們希望以相同的方式進行多個行和/或列的大小，這可能會變得重複。

重複（）函數可以使我們不必重複自己。例如，我們可能會發現自己在寫這篇文章：

，我們可以寫下：

>

在上面的示例中，repot（）函數使我們可以指定我們想要多少列（5），以及它們都應該是什麼大小（1fr-或可用空間的一小部分）。

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

>這使我們的代碼更有效，更易於閱讀。這只是一個簡單的例子。正如我們將在下面看到的那樣，Repoy（）函數還可以做更多的事情。

>

<span>grid-template-columns: repeat(5, 1fr);
</span>

以下筆顯示了上面代碼的簡單演示。包含十個Divs的文章被組織成五列。

看到筆 CSS網格重複（）：5個簡單的列，由sitepoint（@sitepoint） 在Codepen上。

上面的演示使用CSS GAP屬性。要了解有關網格佈局的更多信息，請查看我們的CSS網格初學者指南。 >重複（）函數的選項

>我們實際上可以在retover（）的括號內做很多事情。它需要兩個論點，被逗號分開。第一個表示“計數”，第二個表示“軌道”：重複（，）。 （“軌道”一詞是列或一行的通用名稱。）

>

計數參數可能是三件事之一：>

一個數字（例如1，2，3）

自動擬合關鍵字
自動填充關鍵字
• 顯然，一個數值設置了特定數量的軌道。但是自動擬合和自動填充允許根據可用空間進行不同的軌道。這使他們非常方便響應迅速的佈局而無需媒體查詢。我們將在下面詳細探討它們。

曲目參數指定將要重複的曲目。這些是此參數的選擇：

一個長度值，使用諸如FR，PX，EM，％和CH

之類的單元

最小關鍵的關鍵字
最大關鍵關鍵字
自動關鍵字
minmax（）函數，該函數本身可以具有嵌套的min（）或max（）函數
• >
fit-content（）函數
>命名lines
如您所見，此參數有很多可能的選擇，並且它們可能會開始看起來有些混亂，尤其是當其中幾個組合時。我們將嘗試在這裡保持相當簡單，以免雜草迷失。在大多數情況下，曲目的論點相當簡單且直觀。
• >
>設置重複（）

>的列組組

>在我們探索可以與重複（）一起使用的各種參數之前，值得注意的是，重複（）可用於創建列的模式。 > 例如，考慮六列網格的此“長手”代碼：

我們可以像這樣重寫，使用重複（）：

>這告訴瀏覽器重複三次模式 - 寬列寬，然後是2FR列寬。下面的演示顯示了這一點。

>

看到筆 CSS網格重複（）：sitePoint（@sitepoint）的列模式 在Codepen上。

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

使用重複（）

的長度值

<span>grid-template-columns: repeat(5, 1fr);
</span>

>我們已經看到了與重複（）一起使用的1FR的長度值。 FR單元的優點是，它根據可用空間的尺寸尺寸，而不必擔心可用的空間。但是我們也可以在需要的地方使用其他長度單元。

例如，讓我們設置三個列軌道，並給它們寬度為120像素：

>

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

以下codepen演示顯示結果。

看到筆 CSS網格重複（）：sitepoint（@sitepoint）的長度值 在Codepen上。

>列現在具有固定寬度，即使容器太窄，也不會更改。嘗試在上面的筆中使用瀏覽器寬度播放。還可以嘗試將像素交換為其他長度單元，例如5em，10CH，15％等，以查看其效果。

使用repot（）

的min-content關鍵字

最小的關鍵字將軌道設置為僅與最低內容一樣寬或高。在下面的演示中，我們有三列，每列都設置為最符號，因此每個列與其中包含的最長單詞一樣寬：

<span>grid-template-columns: repeat(5, 1fr);
</span>

看到筆 CSS網格重複（）：按sitepoint（@sitepoint）的最小內容 在Codepen上。

使用重複（）

的Max-Content關鍵字

最大包含關鍵字基本上是對最小內容的相反：它將軌道大小基於網格單元格中最大量的內容。在下面的演示中，列寬度基於最大含量的單元格：>

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

看到筆 CSS網格重複（）：按sitePoint（@sitepoint）最大包含 在Codepen上。

使用重複（）

的自動關鍵字

與重複（）一起使用時，自動關鍵字最大值以最大包含，並以最小符號為單位。

考慮以下列的模式：

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

>在這裡，我們將有六列，每列奇數固定為自動的寬度。在下面的Codepen演示中，我們可以看到，在有足夠的空間的情況下，具有“自動”文本最大值的DIV在Max-Content處出現，而1FR Divs共享剩餘的空間。隨著瀏覽器的縮小，自動列繼續變得更窄，直到達到最小的閾值。

。

看到筆 CSS網格重複（）：由sitePoint（@sitepoint）自動 在Codepen上。

在上面的演示中，一旦每列達到其最小的閾值，DIVS才會開始溢出容器。 （也就是說，文本無法再包裝。）>

>

注意：自動似乎只有上述與其他值混合時的行為。它自己（例如重複（3，auto））的行為就像我們設置重複（3，1fr）一樣。 使用minmax（）函數與重複（） 例如，我們可以將列設置為Minmax（40px，100px），這意味著其最小寬度為40px，其最大可能寬度為100px。 Minmax（）的兩個參數都可以採用諸如FR，PX，EM，％和CH的長度值，以及Min-Content，Max-Content和Auto。但是，最好將長度值用於至少一個參數，因為關鍵字不應該用作兩個參數（儘管我發現這有時確實有效，例如minmax（minmax（min-content，max-content））。

以下代碼設置了五列，每個列的最小寬度為60px，最大寬度為1FR：>

看到筆 CSS網格重複（）：sitepoint（@sitepoint） 在Codepen上。

>這效果很好，直到達到60px的最小寬度為止。在此之後，內容開始閒逛的容器。我們將看到如何盡快獲得更好的結果。

>

使用min（）或max（）

>使用minmax（）函數

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

minmax（）函數也可以作為參數具有min（）或max（）函數。這兩個都有兩個值。 min（）函數應用於其兩個值中的較小，而max（）函數應用於較大的值。這在響應環境中很有用。

例如：

看到筆 CSS網格重複（）：minmax（）函數，sitepoint（@sitepoint），用min（）函數 在Codepen上。

上面的代碼設置了五列。在寬闊的瀏覽器上，這五列將在1FR處均等。在較窄的設備上，這些列會變得越來越窄。一旦擊中60px和8vw的下部，他們就會停止收縮。因此，我們仍然可以發現自己的內容懸掛在狹窄屏幕上的容器上；還有進一步的響應能力。

>如果您發現Minmax（），Min（）和Max（）的組合在此階段有些不知所措，請掛在那裡，因為當我們遇到Auto-Fit和Auto-auto-auto-auto-填充。

使用fit-content（）函數與重複（）

fit-content（）函數採用一個參數，該參數表示軌道可以增長的最大尺寸。因此，直到那個點，軌道可以靈活。 FIT-CONTENT（）可以採用任何長度值，例如FR，PX，EM，％和Ch。

例如，如果我們設置三個列和擬合（120px），則該列寬度將響應起來，直到寬度為120px：>

看到筆 CSS網格重複（）：fit-content（）by sitepoint（@sitepoint） 在Codepen上。

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

使用重複（）的命名行

在網格佈局中，默認情況下，軌道周圍的垂直線和水平線編號。在設置網格 - 板塊柱和網格板行時，我們可以為這些行命名。這使得將內容放在網格上時更容易定位這些行（因為我們不必進入併計算網格線）。

這是一個簡單的例子。命名的線是方括號中的位（[]）：

>

上面的代碼為我們提供了兩列。最左側的垂直網格線（數字1）稱為“側欄”，中間網格線（數字2）稱為“ content-start”，最終網格線（數字3）稱為“內容端”。

<span>grid-template-columns: repeat(5, 1fr);
</span>

>我們還可以在我們的repot（）函數中使用命名線：>

>這意味著我們的每個列現在都有一條左側的線，稱為Yin，右側的線稱為Yang。

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

如果每行具有相同的名字，

>似乎會使生活更加困難，但是我們仍然可以單獨定位它們。例如：

我們可以用網格列來瞄準第一條陰線：yin

我們可以用網格列來瞄準第二個陰線：yin 2

>
• 我們可以將列設置為從第二個陰線跨越三行：網格列：yin 2 / span 3
• 我們可以將列設置為從第二個陰到末端的列以網格列的跨度：yin 2 / yang -1
在重複（）與其他值混合的情況下，重複（）中的命名線可能是最有用的，例如：
• >

>我不會進一步研究命名的線條以及如何在這裡使用它們，因為這是一個單獨的主題，但是您可以在MDN上閱讀有關命名網格線的更多信息。

使用自動擬合和自動填充

使用重複（）

>自動擬合和自動填充關鍵字是設置固定數量軌道的替代方法。他們告訴瀏覽器將盡可能多的曲目適合給定空間。例如：

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

看到筆 CSS電網重複（）：自動擬合和自動填充站點點（@sitepoint） 在Codepen上。

在上面的演示中，DIVS設置為150px的寬度，而那些不能適合一行的divs降至下一行。如果我們將自動擬合更改為自動填充，我們將不會看到差異，因為在這些條件下，他們都做同樣的事情。它們之間的差異只有在特殊情況下才會顯而易見。

在這一點上，自動填充的自動填充是

好，但沒有什麼特別的閃光。當他們與minmax（）和min（）結合在一起時，真正的魔術開始發生，所以讓我們看看接下來的那個。 >

與自動擬合/自動填充，minmax（）和min（）

>使用重複（）

>如果您不愛上repot（），那麼repot（）與自動擬合，minmax（）和min（）的組合肯定會看到丘比特的箭頭刺穿您的頑固的心。它們的組合使我們可以在不使用媒體查詢的情況下創建真正的響應式佈局。

>

使用auto-fit和minmax（）與重複（）

考慮以下CSS：

在此示例中，Minmax（）將最小列寬度設置為200px，最大為1FR。下面的演示顯示了這一點。

<span>grid-template-columns: repeat(5, 1fr);
</span>

>

看到筆 CSS網格重複（）：sitepoint（@sitepoint）的自動擬合和minmax（） 在Codepen上。

每個DIV必須至少為200px寬。如果右邊有額外的空間（少於200像素），則DIVS擴展以填補空間。如果我們擴展了瀏覽器，則一旦有200個空間像素可用，將添加另一個DIV。相反的情況也是如此：當我們縮小瀏覽器範圍時，一旦沒有至少200px的空間才能適合該行，該行中的最後一個div將會下降。一旦掉落，其餘的Divs擴展以填充行。 > 再次，如果我們將自動擬合交換為自動填充，我們將看到相同的行為。 不過，這個示例有一個限制。如果我們使瀏覽器窗口足夠狹窄，則最終將獲得一個列。由於該列的狹窄大於200px，因此DIVS將開始溢出其容器。

>我們可以通過將Min（）（）加入混合物來防止這種溢出發生，所以讓我們看看下一個溢出。

使用auto-fit，minmax（）和min（）與重複（）

我們可以通過引入min（）來控制小寬度的情況。讓我們更新我們的代碼以使其看起來像：

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

現在有兩個選項可用於最小列寬度。瀏覽器將選擇最小的

>。一旦列窄，大於200px，則100％是較小的值，因此它佔了上風。這意味著現在剩餘的列現在設置為寬度：100％，因此它將繼續以寬度較小的寬度良好地融入其容器中。 （將瀏覽器窗口向下擠壓，以便在實踐中看到它。 看到筆 CSS網格重複（）：minmax（）和min（）sitepoint（@sitepoint） 在Codepen上。

>有關使用自動擬合，minmax（）和min（）使用重複（）的更真實的演示，請查看響應式圖像庫的以下Codepen演示。該演示還利用了aptive-ratio屬性，我們在如何使用css axpect-ratio中介紹了該屬性。

> 看到筆 使用sitepoint（@sitepoint）使用aptive-ratio的響應式圖像庫 在Codepen上。

了解自動擬合和自動填充

之間的差異

在我們到目前為止看到的示例中，自動擬合和自動填充之間似乎沒有任何區別。差異僅出現在某些情況下，我們現在將簡要介紹。 >

>我們會剝離演示html，以便只有四個Divs，並設置以下CSS：>

下面的圖片顯示了我們使用自動填充的內容。

<span>grid-template-columns: repeat(5, 1fr);
</span>

瀏覽器正在計算有多少個Divs

可以

適合容器，並為其留出空間。每個現有的Divs都是110px寬，右側的空間也是如此。 >讓我們切換到自動擬合：

下圖顯示了我們使用自動擬合所獲得的。

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

使用自動擬合，瀏覽器還計算出更多DIVS的空間，但隨後將該空間倒入零寬度，並讓現有DIVS擴展以佔用所有空間。在上圖中，您可以看到末端列線仍然編號8。8個堆疊在網格第7、6和5號上方。

>那麼，我們要做什麼？實際上，在大多數情況下，我們將要使用自動擬合，因為當我們可以將其用於我們的內容時，我們通常不希望空間保持空空間。

>

>您可以在此Codepen演示中使用自動擬合和自動填充。嘗試將自動擬合更改為自動填充，並擴大和收縮瀏覽器，以了解它們的行為。

>

關於重複（）

的有用的知識

>如上所述，重複（）函數可以用作帶有網格 - 板塊柱和網格板行的更長聲明的一部分。我們在這裡遇到的大多數朋友 - 長度單元，最小單位，最大包含，自動，minmax（），fit-content（）和命名的行 - 與重複（）以及內部一起工作。 （您可以看到它們與MDN上的網格板柱和網格 - 板行一起工作的示例。）

不允許某些組合進行曲目參數。例如，我們不能使用諸如重複（自動填充，1FR）之類的東西。自動擬合和靈活的單元無法一起玩，因為我們需要在某個地方進行固定的措施，例如Minmax（100px，1FR）。 如我們所見，MinMax（）函數可以具有嵌套的min（）或max（）函數。它還可以包含一個自動，最小，最大包含的之一，而不是兩個。例如，我們可以使用minmax（50px，最大包含），但不能使用minmax（最小的，最大包含）（儘管老實說，我發現其中一些組合

> do

>無論如何似乎都起作用） 。

重複（）符號無法嵌套。因此，我們在重複（）中無法重複（）。但是我們當然可以並排重複（）函數 - 例如重複（5，1fr）100px重複（2，50px）。 總結

重複（）函數是一種非常有用的工具，用於有效地列出網格柱和行的重複模式。它可用於創建完全響應的佈局，而無需僅在一行代碼中進行媒體查詢。 在大多數情況下，您無需重複（）就不會在雜草中降得太遠。它最令人印象深刻的功能是在這樣的基本示例中總結的：

>

>確保將該代碼線保持在您的後袋中，因為它非常方便。

您可以在此處了解有關重複（）函數的更多信息：

>

MDN

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

上的重複（）頁面 W3C網格佈局模塊規範的重複（）部分

有關CSS網格佈局的更一般介紹，請參見CSS網格佈局的介紹。

經常詢問有關CSS網格重複功能>使用重複函數和手動指定CSS網格中的網格軌道有什麼區別？

> CSS網格中的重複函數是用於定義相同大小的多個網格軌道的簡寫方法。您可以使用重複功能來定義軌道數及其大小，而不是手動指定每個軌道。這使您的代碼清潔器易於閱讀。例如，您可以簡單地編寫“網格 - 板塊柱：重複（4，100px）;”，而不是編寫“ Grid-Template-Collumns：100px 100px 100px 100px;”。這兩個代碼都將創建一個帶有100px寬度的四個列的網格。

我可以使用具有不同軌道尺寸的重複功能嗎？

是的，您可以使用具有不同軌道尺寸的重複功能。重複功能接受兩個參數：重複數量和軌道大小。如果要創建帶有不同尺寸的軌道的網格，則可以在同一屬性中多次使用重複功能。例如，“網格板柱：重複（2，100px）重複（3，200px）；”將創建一個帶有兩個列的100px和200px的三列的網格。

>自動填充關鍵字如何與重複函數一起使用？

>自動填充關鍵字與重複一起使用功能可以自動用盡可能多的軌道填充網格容器。軌道的大小指定為重複函數的第二個參數。如果容器的大小超過軌道的總尺寸，則剩餘空間將在軌道之間平均分佈。例如，“網格板柱：重複（自動填充，100px）；”可以在容器中創建盡可能多的100px列。

>

>我可以將重複函數與分數單元（fr）？

>是的，可以使用分數單元（ fr）。 FR單元代表網格容器中可用空間的一小部分。例如，“網格板柱：重複（3，1fr）；”將創建一個帶有三個列的網格，每個列佔該集裝箱寬度的三分之一。

>

>自動擬合關鍵字如何與重複函數一起使用？使用重複函數來創建響應式網格佈局。它的工作原理與自動填充類似，但折疊了任何空的軌道。這意味著，如果沒有足夠的內容來填充所有軌道，則其餘的軌道將擴展以佔用可用空間。例如，“網格板柱：重複（自動擬合，minmax（100px，1fr））；”將在容器中創建盡可能多的100px列，任何其餘空間都將分佈在列之間。

>我可以將重複函數與minmax函數一起使用嗎？ MinMax函數定義了大於或等於最小值或小於或等於最大值的尺寸範圍。例如，“網格板柱：重複（3，minmax（100px，1fr））；”將創建一個帶有三個列的網格，每個列的最小寬度為100px，最大寬度為1fr。

如果我使用負數的重複函數會發生什麼？重複功能帶有負數，瀏覽器將忽略規則，並且不會創建網格。重複函數僅接受正整數作為重複的數量。

>我可以使用具有百分比值的重複函數嗎？

是的，您可以使用具有百分比值的重複函數。該百分比是根據網格容器的尺寸計算的。例如，“網格板柱：重複（2，50％）；”將創建一個帶有兩個列的網格，每個列佔容器寬度的一半。

我可以將重複函數與網格 - 板板行屬性一起使用嗎？與網格板行屬性一起使用以定義網格行的大小。語法與網格板列相同。例如，“網格 - 板行：重複（3，100px）；”可以創建一個帶有100px高度的三行的網格。

>我可以將重複函數與媒體查詢一起使用嗎？

是的，可以將重複函數用於媒體查詢以創建響應網格佈局。您可以使用媒體查詢中的重複功能為不同的屏幕尺寸定義不同的網格佈局。例如，您可能需要在小屏幕上顯示兩個列，並在大屏幕上顯示四列。這可以通過以下代碼來實現：

@media（max-width：600px）{

.grid {

grid-template-columns：重複（2，1fr） >}

@media（ min-width：601px）{

.grid { grid-grid-template-columns：repot（4，1fr）; }

}

}

>

以上是如何使用CSS網格重複（）函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！