英文 | https://javascript.plainenglish.io/the-3-powerful-css-grid-functions-that-you-should-know-26748fbe0694

翻譯 | web前端開發(fā)

在本文中，我們將學(xué)習(xí)有關(guān)CSS的三個(gè)函數(shù)，如果你使用過CSS Grid，則對(duì)其應(yīng)該不陌生，如果沒有使用過的，也沒有關(guān)系，今天可以正好了解一下。

下面我們開始吧。

1、重復(fù)功能

該函數(shù)repeat()用于重復(fù)網(wǎng)格布局中的列數(shù)和行數(shù)。

可以在CSS Grid屬性grid-template-columns和中使用此功能grid-template-rows。它還可以嵌套其他功能，例如minmax()和fit-content。

repeat()函數(shù)還允許以更緊湊的形式寫入大量的列和行。它包含兩個(gè)參數(shù)：要重復(fù)的次數(shù)以及要重復(fù)的列大小或行大小。

假設(shè)你要?jiǎng)?chuàng)建一個(gè)具有6列的網(wǎng)格布局，則可以使用以下語法，來做到這一點(diǎn)：

div { display：grid;  grid-template-columns：1fr 1fr 1fr 1fr 1fr 1fr; }

如你所見，代碼看起來很丑陋，很難編寫。我們可以通過使用repeat()函數(shù)來解決此問題。

示例代碼如下：

div { display：grid; grid-template-columns：repeat（6，1fr） ; }

結(jié)果如下：

這更容易編寫。例如，如果要?jiǎng)?chuàng)建4行50px的行，可以再次使用repeat( )函數(shù)：

div { display：grid; grid-template-rows：repeat（4，50px） ; }

結(jié)果如下：

2、最小-最大功能

該功能minmax()定義了最小尺寸和最大尺寸之間的尺寸范圍。如果你調(diào)整手機(jī)的屏幕尺寸，內(nèi)容將縮小直到達(dá)到最小尺寸為止。如果你調(diào)整桌面屏幕的大小，內(nèi)容將一直延伸到達(dá)到最大大小為止。

minmax（200px，1fr）; minmax（400px，50％）; minmax（30％，300px）;

CSS Grid屬性grid-template-columns和中也使用此功能grid-template-rows。它有兩個(gè)參數(shù)：最小大小和最大大小。

假設(shè)你要制作一個(gè)具有4列的網(wǎng)格布局，并且還希望使用該功能minmax()來拉伸內(nèi)容并使所有內(nèi)容具有響應(yīng)性。將手機(jī)屏幕的最小像素為50px，桌面屏幕的最大像素為380px。

看下面的例子：

.container { display：grid; grid-template-columns：repeat（4，minmax（50px，380px））; }

如上所示，由于需要4列，因此我們使用該函數(shù)將函數(shù)repeat()重復(fù)了minmax()4次。minmax()嵌套在里面reapeat()。

在小屏幕上輸出的結(jié)果如下：

在更大屏幕上輸出的結(jié)果如下：

因此，該功能minmax()允許根據(jù)屏幕尺寸來拉伸和縮小內(nèi)容。

該函數(shù)fit-content采用絕對(duì)長度或百分比的參數(shù)。它用于根據(jù)列和行內(nèi)部的內(nèi)容自動(dòng)更改列和行的大小。

該函數(shù)fit-content根據(jù)以下公式將給定尺寸夾緊為可用尺寸：

最小值（最大大小，最大值（最小大小，參數(shù)））/ *上面的公式等效于：* / fit-content（arguments ）

它也可以用作CSS屬性進(jìn)行使用。

以下為演示示例代碼：

.container { display：grid; grid-template-columns：fit-content（300px）fit-content（300px） ; }

演示結(jié)果如下：

當(dāng)添加了一些內(nèi)容后，得到的結(jié)果如下：

如果你覺得很難理解，也可以在MDN文檔中進(jìn)行查看。

如果你使用的是CSS Grid，則應(yīng)了解這些功能。該語言的列表非常龐大。你需要學(xué)習(xí)更多有用的功能。我建議你多練習(xí)，因?yàn)檫@是不斷進(jìn)步的最佳方法。

最后，感謝你閱讀本文，希望你覺得它對(duì)你有用。

本文完?