用 CSS grid 搞定響應式布局

css grid 可以用來建立乙個超酷的影象網格圖，它將根據螢幕的寬度來改變列的數量。

最厲害的地方在於：所有的響應特性被新增到了一行 css **中。

這意味著我們不必將 html 與醜陋的類名(如col-sm-4, col-md-8)混雜在一起，也不必為每個螢幕建立**查詢。

html **：

123456

css **：

.container

效果如圖所示：

讓列開始具有自適應特性吧。

css 柵格布局帶來了乙個全新的值:fraction單位，fraction單位通常簡寫為fr，它允許你根據需要將容器拆分為多個塊。

讓我們將每一列更改為乙個 fraction 單位寬:

.container

柵格布局將會把整個寬度分成三個 fraction，每列佔據乙個 fraction 單位，效果如下：

如果我們將grid-template-columns的值更改為1fr 2fr 1fr，第二列的寬度將會是其它兩列的兩倍。總寬現在是四個 fraction 單位，第二列佔據兩個 fraction 單位，其它列各佔乙個 fraction。效果如下：

總的來說，fraction 單位值將使你可以很容易的更改列的寬度。

然而，上面列子並沒有給出我們想要的響應性，因為網格總是三列寬。我們希望網格能根據容器的寬度改變列的數量。要做到這一點，你必須學習如下三個概念：

repeat()

首先我們學習repeat()函式。這是乙個強大的指定列和行的方法。讓我們使用repeat()函式來更改網格:

.container

在上面**中，repeat(3, 100px)等於100px 100px 100px。第乙個引數指定行與列的數量，第二個引數指定它們的寬度，因此它將為我們提供與開始時完全相同的布局：

然後是auto-fit。讓我們跳過固定數量的列，將3替換為自適應數量：

.container

效果如下:

現在，柵格將會根據容器的寬度調整其數量。它會嘗試在容器中容納盡可能多的 100px 寬的列。但如果我們將所有列硬寫為 100px，我們將永遠沒法獲得所需的彈性，因為它們很難填充整個寬度。正如你在上圖看到的，網格通常在右側留有空白。

minmax()

為了解決上述問題，我們需要minmax()。我們將 100px 替換為minmax(100px, 1fr)，**如下：

.container

效果如下：

正如你所見，效果完美。minmax()函式定義的範圍大於或等於min，小於或等於max。

因此，現在每列將至少為 100px。但如果有更多的可用空間，柵格布局將簡單地將其均分給每列，因為這些列變成了 fraction 單位，而不是 100px。

目前尚不支援ie9以下版本。具體支援情況可去can i use 上查閱。