鑰匙要點
，我們可以寫下：
>
在上面的示例中，repot（）函數使我們可以指定我們想要多少列（5），以及它們都應該是什麼大小（1fr-或可用空間的一小部分）。<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
>這使我們的代碼更有效，更易於閱讀。這只是一個簡單的例子。正如我們將在下面看到的那樣，Repoy（）函數還可以做更多的事情。
><span>grid-template-columns: repeat(5, 1fr); </span>
看到筆 CSS網格重複（）：5個簡單的列，由sitepoint（@sitepoint） 在Codepen上。
上面的演示使用CSS GAP屬性。要了解有關網格佈局的更多信息，請查看我們的CSS網格初學者指南。 >重複（）函數的選項
計數參數可能是三件事之一：
一個數字（例如1，2，3）
一個長度值，使用諸如FR，PX，EM，％和CH
之類的單元>在我們探索可以與重複（）一起使用的各種參數之前，值得注意的是，重複（）可用於創建列的模式。
>這告訴瀏覽器重複三次模式 - 寬列寬，然後是2FR列寬。下面的演示顯示了這一點。
>看到筆 CSS網格重複（）：sitePoint（@sitepoint）的列模式 在Codepen上。
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
使用重複（）
的長度值<span>grid-template-columns: repeat(5, 1fr); </span>
例如，讓我們設置三個列軌道，並給它們寬度為120像素：
><span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
以下codepen演示顯示結果。
看到筆 CSS網格重複（）：sitepoint（@sitepoint）的長度值 在Codepen上。
>列現在具有固定寬度，即使容器太窄，也不會更改。嘗試在上面的筆中使用瀏覽器寬度播放。還可以嘗試將像素交換為其他長度單元，例如5em，10CH，15％等，以查看其效果。
最小的關鍵字將軌道設置為僅與最低內容一樣寬或高。在下面的演示中，我們有三列，每列都設置為最符號，因此每個列與其中包含的最長單詞一樣寬：
<span>grid-template-columns: repeat(5, 1fr); </span>
看到筆 CSS網格重複（）：按sitepoint（@sitepoint）的最小內容 在Codepen上。
最大包含關鍵字基本上是對最小內容的相反：它將軌道大小基於網格單元格中最大量的內容。在下面的演示中，列寬度基於最大含量的單元格：
<span>article {
</span> <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>使用重複（）
考慮以下列的模式：
<span>article {
</span> <span>grid-template-columns: repeat(3, 1fr 2fr);
</span><span>}
</span>。
看到筆 CSS網格重複（）：由sitePoint（@sitepoint）自動 在Codepen上。
在上面的演示中，一旦每列達到其最小的閾值，DIVS才會開始溢出容器。 （也就是說，文本無法再包裝。）
注意：自動似乎只有上述與其他值混合時的行為。它自己（例如重複（3，auto））的行為就像我們設置重複（3，1fr）一樣。
使用minmax（）函數與重複（）
>這效果很好，直到達到60px的最小寬度為止。在此之後，內容開始閒逛的容器。我們將看到如何盡快獲得更好的結果。 使用min（）或max（）
上面的代碼設置了五列。在寬闊的瀏覽器上，這五列將在1FR處均等。在較窄的設備上，這些列會變得越來越窄。一旦擊中60px和8vw的下部，他們就會停止收縮。因此，我們仍然可以發現自己的內容懸掛在狹窄屏幕上的容器上；還有進一步的響應能力。 >如果您發現Minmax（），Min（）和Max（）的組合在此階段有些不知所措，請掛在那裡，因為當我們遇到Auto-Fit和Auto-auto-auto-auto-填充。 fit-content（）函數採用一個參數，該參數表示軌道可以增長的最大尺寸。因此，直到那個點，軌道可以靈活。 FIT-CONTENT（）可以採用任何長度值，例如FR，PX，EM，％和Ch。
>
上面的代碼為我們提供了兩列。最左側的垂直網格線（數字1）稱為“側欄”，中間網格線（數字2）稱為“ content-start”，最終網格線（數字3）稱為“內容端”。
如果每行具有相同的名字，
>我不會進一步研究命名的線條以及如何在這裡使用它們，因為這是一個單獨的主題，但是您可以在MDN上閱讀有關命名網格線的更多信息。 >自動擬合和自動填充關鍵字是設置固定數量軌道的替代方法。他們告訴瀏覽器將盡可能多的曲目適合給定空間。例如：
看到筆
CSS電網重複（）：自動擬合和自動填充站點點（@sitepoint）
在Codepen上。
在上面的演示中，DIVS設置為150px的寬度，而那些不能適合一行的divs降至下一行。如果我們將自動擬合更改為自動填充，我們將不會看到差異，因為在這些條件下，他們都做同樣的事情。它們之間的差異只有在特殊情況下才會顯而易見。 好，但沒有什麼特別的閃光。當他們與minmax（）和min（）結合在一起時，真正的魔術開始發生，所以讓我們看看接下來的那個。 >
>
看到筆
CSS網格重複（）：sitepoint（@sitepoint）的自動擬合和minmax（）
在Codepen上。
>我們可以通過將Min（）（）加入混合物來防止這種溢出發生，所以讓我們看看下一個溢出。
>。一旦列窄，大於200px，則100％是較小的值，因此它佔了上風。這意味著現在剩餘的列現在設置為寬度：100％，因此它將繼續以寬度較小的寬度良好地融入其容器中。 （將瀏覽器窗口向下擠壓，以便在實踐中看到它。
看到筆
CSS網格重複（）：minmax（）和min（）sitepoint（@sitepoint）
在Codepen上。
>有關使用自動擬合，minmax（）和min（）使用重複（）的更真實的演示，請查看響應式圖像庫的以下Codepen演示。該演示還利用了aptive-ratio屬性，我們在如何使用css axpect-ratio中介紹了該屬性。
之間的差異
下面的圖片顯示了我們使用自動填充的內容。 瀏覽器正在計算有多少個Divs 適合容器，並為其留出空間。每個現有的Divs都是110px寬，右側的空間也是如此。
下圖顯示了我們使用自動擬合所獲得的。
>那麼，我們要做什麼？實際上，在大多數情況下，我們將要使用自動擬合，因為當我們可以將其用於我們的內容時，我們通常不希望空間保持空空間。 >您可以在此Codepen演示中使用自動擬合和自動填充。嘗試將自動擬合更改為自動填充，並擴大和收縮瀏覽器，以了解它們的行為。 >如上所述，重複（）函數可以用作帶有網格 - 板塊柱和網格板行的更長聲明的一部分。我們在這裡遇到的大多數朋友 - 長度單元，最小單位，最大包含，自動，minmax（），fit-content（）和命名的行 - 與重複（）以及內部一起工作。 （您可以看到它們與MDN上的網格板柱和網格 - 板行一起工作的示例。）
> do
重複（）符號無法嵌套。因此，我們在重複（）中無法重複（）。但是我們當然可以並排重複（）函數 - 例如重複（5，1fr）100px重複（2，50px）。
總結 重複（）函數是一種非常有用的工具，用於有效地列出網格柱和行的重複模式。它可用於創建完全響應的佈局，而無需僅在一行代碼中進行媒體查詢。
在大多數情況下，您無需重複（）就不會在雜草中降得太遠。它最令人印象深刻的功能是在這樣的基本示例中總結的： 您可以在此處了解有關重複（）函數的更多信息：
>自動填充關鍵字如何與重複函數一起使用？ >是的，可以使用分數單元（ fr）。 FR單元代表網格容器中可用空間的一小部分。例如，“網格板柱：重複（3，1fr）；”將創建一個帶有三個列的網格，每個列佔該集裝箱寬度的三分之一。 我可以將重複函數與網格 - 板板行屬性一起使用嗎？與網格板行屬性一起使用以定義網格行的大小。語法與網格板列相同。例如，“網格 - 板行：重複（3，100px）；”可以創建一個帶有100px高度的三行的網格。 是的，可以將重複函數用於媒體查詢以創建響應網格佈局。您可以使用媒體查詢中的重複功能為不同的屏幕尺寸定義不同的網格佈局。例如，您可能需要在小屏幕上顯示兩個列，並在大屏幕上顯示四列。這可以通過以下代碼來實現： @media（ min-width：601px）{ >
以下代碼設置了五列，每個列的最小寬度為60px，最大寬度為1FR：<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>
使用fit-content（）函數與重複（）
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>
在網格佈局中，默認情況下，軌道周圍的垂直線和水平線編號。在設置網格 - 板塊柱和網格板行時，我們可以為這些行命名。這使得將內容放在網格上時更容易定位這些行（因為我們不必進入併計算網格線）。
這是一個簡單的例子。命名的線是方括號中的位（[]）：<span>grid-template-columns: repeat(5, 1fr);
</span>
<span>article {
</span> <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>
>
使用自動擬合和自動填充
使用重複（）
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>
>使用重複（）
>如果您不愛上repot（），那麼repot（）與自動擬合，minmax（）和min（）的組合肯定會看到丘比特的箭頭刺穿您的頑固的心。它們的組合使我們可以在不使用媒體查詢的情況下創建真正的響應式佈局。
考慮以下CSS：<span>grid-template-columns: repeat(5, 1fr);
</span>
我們可以通過引入min（）來控制小寬度的情況。讓我們更新我們的代碼以使其看起來像：<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>
>我們會剝離演示html，以便只有四個Divs，並設置以下CSS：
<span>grid-template-columns: repeat(5, 1fr);
</span>
>讓我們切換到自動擬合：<span>article {
</span> <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>關於重複（）
的有用的知識
>確保將該代碼線保持在您的後袋中，因為它非常方便。
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>
經常詢問有關CSS網格重複功能
是的，您可以使用具有不同軌道尺寸的重複功能。重複功能接受兩個參數：重複數量和軌道大小。如果要創建帶有不同尺寸的軌道的網格，則可以在同一屬性中多次使用重複功能。例如，“網格板柱：重複（2，100px）重複（3，200px）；”將創建一個帶有兩個列的100px和200px的三列的網格。
>
>我可以將重複函數與分數單元（fr）？ >自動擬合關鍵字如何與重複函數一起使用？使用重複函數來創建響應式網格佈局。它的工作原理與自動填充類似，但折疊了任何空的軌道。這意味著，如果沒有足夠的內容來填充所有軌道，則其餘的軌道將擴展以佔用可用空間。例如，“網格板柱：重複（自動擬合，minmax（100px，1fr））；”將在容器中創建盡可能多的100px列，任何其餘空間都將分佈在列之間。
>我可以使用具有百分比值的重複函數嗎？ >我可以將重複函數與minmax函數一起使用嗎？ MinMax函數定義了大於或等於最小值或小於或等於最大值的尺寸範圍。例如，“網格板柱：重複（3，minmax（100px，1fr））；”將創建一個帶有三個列的網格，每個列的最小寬度為100px，最大寬度為1fr。
如果我使用負數的重複函數會發生什麼？重複功能帶有負數，瀏覽器將忽略規則，並且不會創建網格。重複函數僅接受正整數作為重複的數量。 是的，您可以使用具有百分比值的重複函數。該百分比是根據網格容器的尺寸計算的。例如，“網格板柱：重複（2，50％）；”將創建一個帶有兩個列的網格，每個列佔容器寬度的一半。
>我可以將重複函數與媒體查詢一起使用嗎？
.grid {
grid-template-columns：重複（2，1fr） >}}
}
以上是如何使用CSS網格重複（）函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
