一行 CSS 代碼實現響應式布局 – 使用 Grid 實現的響應式布局
在這篇文章中，我將教你如何使用 CSS Grid(網格) 布局來創建一個超酷的圖像網格，它會根據屏幕的寬度改變列的數量，以實現響應式布局。
而這篇文章中最漂亮的部分是：添加一行 CSS 代碼即可實現響應式布局。
這意味著我們不必通過丑陋的類名（即?col-sm-4，col-md-8）來混淆 HTML ，或者為每一個屏幕尺寸創建媒體查詢。
現在就讓讓我們開始吧！
設置
對于本文，我們將繼續使用?5分鐘學會 CSS Grid 布局?文章中使用的網格。然后我們將在文章的最后添加圖片。以下是我們的初始網格的外觀：
這是HTML：
HTML 代碼:
?<div class="container>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
還有相應的 CSS ：
CSS 代碼:
.container {
? ? display: grid;
? ? grid-template-columns: 100px 100px 100px;
? ? grid-template-rows: 50px 50px;
}
注意：這個例子也有一些基本的樣式，比如容器寬度，網格間隔，背景顏色什么的，我不會在這里介紹，因為它與 CSS Grid 沒有任何關系。
如果這段代碼讓你感到困惑，我建議你閱讀?5分鐘學會 CSS Grid 布局?這篇文章，在那里我解釋了 Grid 布局模塊的基礎知識。
讓我們開始將 列 實現響應式布局。
使用等分(fr)單位實現基本的響應式
CSS Grid 帶來了一個全新的值，稱為等分單位，即?fr?。它允許你將容器可用空間分成你想要的多個等分空間。
讓我們將每個列更改為一個等分單位寬度。
CSS 代碼:
.container {
? ? display: grid;
? ? grid-template-columns: 1fr 1fr 1fr;
? ? grid-template-rows: 50px 50px;
}
這里發生的事情是，將整個網格的寬度分成三等分，每一列都占據一個?fr?單位。結果是：
如果我們將?grid-template-columns?的值更改為?1fr 2fr 1fr，那么第 2 列現在將是另外 2 列的 2 倍。總寬度現在是 4 等分，第 2 列占據了 2 等分，而其他 2 列則各占 1 等分。看起來類似這樣：
換句話說，等分單位值使你可以非常容易地改變列的寬度。
更加高級的響應式
但是，上面的例子并沒有給我們想要的響應式，因為這個網格總是包含 3 列。我們希望我們的網格根據容器的寬度來改變列的數量。要做到這一點，你必須學習三個新的概念。
repeat()
我們將從?repeat()?函數開始。 這是指定列和行更強大的方法。 讓我們把原來的網格改成使用?repeat()?：
CSS 代碼:
.container {
? ? display: grid;
? ? grid-template-columns: repeat(3, 100px);
? ? grid-template-rows: repeat(2, 50px);
}
換句話說，repeat(3, 100px)?與?100px 100px 100px?相同。 第一個參數指定了你想要的列數或行數，第二個參數指定了它們的寬度，所以上面的代碼將為我們創建和第一個一樣的布局。
auto-fit （自適應）
然后是自適應。讓我們跳過固定數量的列，而是用?auto-fit?取代 3 。
CSS 代碼:
.container {
? ? display: grid;
? ? grid-gap: 5px;
? ? grid-template-columns: repeat(auto-fit, 100px);
? ? grid-template-rows: repeat(2, 100px);
}
這會達到以下效果：
你會看到，現在這個網格已經可以通過容器的寬度來改變列的數量。
它只是試圖盡可能多地將?100px?寬的列排列在容器中。
但是，如果我們將所有列硬編碼為?100px?，我們永遠得不到我們想要的靈活性，因為它們很少會加起來正好等于容器的寬度。正如你在上面的 gif 圖中所看到的，網格通常會在右側留下空白區域。
minmax()
為了解決這個問題，我們需要的最后一方法是?minmax()。我們只需用?minmax(100px, 1fr)?替換?100px?即可。這是最終的CSS。
CSS 代碼:
.container {
? ? display: grid;
? ? grid-gap: 5px;
? ? grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
? ? grid-template-rows: repeat(2, 100px);
}
注意，所有的響應都發生在一行 CSS 中。
這會達到以下效果：
正如你們所見，這樣很完美。minmax()?函數定義大于或等于?min?且小于或等于?max?的大小范圍。
所以現在列的寬度至少?100px?。但是，如果有更多的可用空間，網格將簡單地分配給每個列，因為列的值變成了一個等分單位?1fr?，而不是?100px?。
添加圖片
現在最后一步是添加圖片。 這與 CSS Grid 沒有任何關系，但是我們還是要來看看代碼。
我們將在每個網格項內添加一個?img?標簽。
HTML 代碼:
<div><img src="img/foret.jpg"/></div>
為了使圖像適合該網格項，我們將它設置為與網格項一樣寬和高，然后使用?object-fit: cover;。這將使圖片覆蓋整個容器，如果需要的話，瀏覽器會裁剪該圖片。
CSS 代碼:
.container > div > img {
? ? width: 100%;
? ? height: 100%;
? ? object-fit: cover;
}
效果如下：
就是這么簡單！你已經了解了 CSS Grid 中最復雜的概念之一，所以后面請自己動手吧。
瀏覽器支持
在我們結束之前，我還需要提及瀏覽器的支持。在寫這篇文章的時候，占全球 77％ 的網站流量的瀏覽器支持CSS Grid，而且正在攀升。
我相信 2018 年將是 CSS Grid 大量應用的一年。很快會得到突破，并將成為前端開發人員的必備技能。就像過去幾年在 CSS Flexbox 所發生的一樣。
