英文 | https://javascript.plainenglish.io/the-3-powerful-css-grid-functions-that-you-should-know-26748fbe0694
翻譯 | web前端開發
在本文中，我們将學習有關CSS的三個函數，如果你使用過CSS Grid，則對其應該不陌生，如果沒有使用過的，也沒有關系，今天可以正好了解一下。
下面我們開始吧。
1、重複功能
該函數repeat()用于重複網格布局中的列數和行數。
可以在CSS Grid屬性grid-template-columns和中使用此功能grid-template-rows。它還可以嵌套其他功能，例如minmax()和fit-content。
repeat()函數還允許以更緊湊的形式寫入大量的列和行。它包含兩個參數：要重複的次數以及要重複的列大小或行大小。
假設你要建立一個具有6列的網格布局，則可以使用以下文法，來做到這一點：
div {
display：grid;
grid-template-columns：1fr 1fr 1fr 1fr 1fr 1fr;
} 如你所見，代碼看起來很醜陋，很難編寫。我們可以通過使用repeat()函數來解決此問題。
示例代碼如下：
div {
display：grid;
grid-template-columns：repeat（6，1fr） ;
} 結果如下：
這更容易編寫。例如，如果要建立4行50px的行，可以再次使用repeat( )函數：
div {
display：grid;
grid-template-rows：repeat（4，50px） ;
} 結果如下：
2、最小-最大功能
該功能minmax()定義了最小尺寸和最大尺寸之間的尺寸範圍。如果你調整手機的螢幕尺寸，内容将縮小直到達到最小尺寸為止。如果你調整桌面螢幕的大小，内容将一直延伸到達到最大大小為止。
minmax（200px，1fr）;
minmax（400px，50％）;
minmax（30％，300px）; CSS Grid屬性grid-template-columns和中也使用此功能grid-template-rows。它有兩個參數：最小大小和最大大小。
假設你要制作一個具有4列的網格布局，并且還希望使用該功能minmax()來拉伸内容并使所有内容具有響應性。将手機螢幕的最小像素為50px，桌面螢幕的最大像素為380px。
看下面的例子：
.container {
display：grid;
grid-template-columns：repeat（4，minmax（50px，380px））;
} 如上所示，由于需要4列，是以我們使用該函數将函數repeat()重複了minmax()4次。minmax()嵌套在裡面reapeat()。
在小螢幕上輸出的結果如下：
在更大螢幕上輸出的結果如下：
是以，該功能minmax()允許根據螢幕尺寸來拉伸和縮小内容。
3、适合内容功能
該函數fit-content采用絕對長度或百分比的參數。它用于根據列和行内部的内容自動更改列和行的大小。
該函數fit-content根據以下公式将給定尺寸夾緊為可用尺寸：
最小值（最大大小，最大值（最小大小，參數））
/ *上面的公式等效于：* /
fit-content（arguments ） 它也可以用作CSS屬性進行使用。
以下為示範示例代碼：
.container {
display：grid;
grid-template-columns：fit-content（300px）fit-content（300px） ;
} 示範結果如下：
當添加了一些内容後，得到的結果如下：
如果你覺得很難了解，也可以在MDN文檔中進行檢視。
結論
如果你使用的是CSS Grid，則應了解這些功能。該語言的清單非常龐大。你需要學習更多有用的功能。我建議你多練習，因為這是不斷進步的最佳方法。
最後，感謝你閱讀本文，希望你覺得它對你有用。
本文完〜