一行 CSS 代碼實(shí)現(xiàn)響應(yīng)式布局 – 使用 Grid 實(shí)現(xiàn)的響應(yīng)式布局
在這篇文章中，我將教你如何使用 CSS Grid(網(wǎng)格) 布局來創(chuàng)建一個超酷的圖像網(wǎng)格，它會根據(jù)屏幕的寬度改變列的數(shù)量盔沫，以實(shí)現(xiàn)響應(yīng)式布局四康。
而這篇文章中最漂亮的部分是：添加一行 CSS 代碼即可實(shí)現(xiàn)響應(yīng)式布局。
這意味著我們不必通過丑陋的類名（即?col-sm-4洪碳，col-md-8）來混淆 HTML 递览，或者為每一個屏幕尺寸創(chuàng)建媒體查詢。
現(xiàn)在就讓讓我們開始吧瞳腌！
設(shè)置
對于本文绞铃，我們將繼續(xù)使用?5分鐘學(xué)會 CSS Grid 布局?文章中使用的網(wǎng)格。然后我們將在文章的最后添加圖片嫂侍。以下是我們的初始網(wǎng)格的外觀：
這是HTML：
HTML 代碼:
?<div class="container>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
還有相應(yīng)的 CSS ：
CSS 代碼:
.container {
? ? display: grid;
? ? grid-template-columns: 100px 100px 100px;
? ? grid-template-rows: 50px 50px;
}
注意：這個例子也有一些基本的樣式儿捧，比如容器寬度，網(wǎng)格間隔挑宠，背景顏色什么的菲盾，我不會在這里介紹，因為它與 CSS Grid 沒有任何關(guān)系各淀。
如果這段代碼讓你感到困惑懒鉴，我建議你閱讀?5分鐘學(xué)會 CSS Grid 布局?這篇文章，在那里我解釋了 Grid 布局模塊的基礎(chǔ)知識碎浇。
讓我們開始將 列 實(shí)現(xiàn)響應(yīng)式布局疗我。
使用等分(fr)單位實(shí)現(xiàn)基本的響應(yīng)式
CSS Grid 帶來了一個全新的值，稱為等分單位南捂，即?fr?吴裤。它允許你將容器可用空間分成你想要的多個等分空間。
讓我們將每個列更改為一個等分單位寬度溺健。
CSS 代碼:
.container {
? ? display: grid;
? ? grid-template-columns: 1fr 1fr 1fr;
? ? grid-template-rows: 50px 50px;
}
這里發(fā)生的事情是麦牺，將整個網(wǎng)格的寬度分成三等分钮蛛，每一列都占據(jù)一個?fr?單位。結(jié)果是：
如果我們將?grid-template-columns?的值更改為?1fr 2fr 1fr剖膳，那么第 2 列現(xiàn)在將是另外 2 列的 2 倍魏颓。總寬度現(xiàn)在是 4 等分吱晒，第 2 列占據(jù)了 2 等分甸饱，而其他 2 列則各占 1 等分÷乇簦看起來類似這樣：
換句話說叹话，等分單位值使你可以非常容易地改變列的寬度。
更加高級的響應(yīng)式
但是墩瞳，上面的例子并沒有給我們想要的響應(yīng)式驼壶，因為這個網(wǎng)格總是包含 3 列。我們希望我們的網(wǎng)格根據(jù)容器的寬度來改變列的數(shù)量喉酌。要做到這一點(diǎn)热凹，你必須學(xué)習(xí)三個新的概念。
repeat()
我們將從?repeat()?函數(shù)開始泪电。 這是指定列和行更強(qiáng)大的方法般妙。 讓我們把原來的網(wǎng)格改成使用?repeat()?：
CSS 代碼:
.container {
? ? display: grid;
? ? grid-template-columns: repeat(3, 100px);
? ? grid-template-rows: repeat(2, 50px);
}
換句話說，repeat(3, 100px)?與?100px 100px 100px?相同相速。 第一個參數(shù)指定了你想要的列數(shù)或行數(shù)碟渺，第二個參數(shù)指定了它們的寬度，所以上面的代碼將為我們創(chuàng)建和第一個一樣的布局和蚪。
auto-fit （自適應(yīng)）
然后是自適應(yīng)止状。讓我們跳過固定數(shù)量的列，而是用?auto-fit?取代 3 攒霹。
CSS 代碼:
.container {
? ? display: grid;
? ? grid-gap: 5px;
? ? grid-template-columns: repeat(auto-fit, 100px);
? ? grid-template-rows: repeat(2, 100px);
}
這會達(dá)到以下效果：
你會看到怯疤，現(xiàn)在這個網(wǎng)格已經(jīng)可以通過容器的寬度來改變列的數(shù)量。
它只是試圖盡可能多地將?100px?寬的列排列在容器中催束。
但是集峦，如果我們將所有列硬編碼為?100px?，我們永遠(yuǎn)得不到我們想要的靈活性抠刺，因為它們很少會加起來正好等于容器的寬度塔淤。正如你在上面的 gif 圖中所看到的，網(wǎng)格通常會在右側(cè)留下空白區(qū)域速妖。
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);
}
注意稿饰，所有的響應(yīng)都發(fā)生在一行 CSS 中。
這會達(dá)到以下效果：
正如你們所見露泊，這樣很完美喉镰。minmax()?函數(shù)定義大于或等于?min?且小于或等于?max?的大小范圍。
所以現(xiàn)在列的寬度至少?100px?惭笑。但是侣姆，如果有更多的可用空間，網(wǎng)格將簡單地分配給每個列沉噩，因為列的值變成了一個等分單位?1fr?捺宗，而不是?100px?。
添加圖片
現(xiàn)在最后一步是添加圖片屁擅。 這與 CSS Grid 沒有任何關(guān)系偿凭，但是我們還是要來看看代碼产弹。
我們將在每個網(wǎng)格項內(nèi)添加一個?img?標(biāo)簽派歌。
HTML 代碼:
<div><img src="img/foret.jpg"/></div>
為了使圖像適合該網(wǎng)格項，我們將它設(shè)置為與網(wǎng)格項一樣寬和高痰哨，然后使用?object-fit: cover;胶果。這將使圖片覆蓋整個容器，如果需要的話斤斧，瀏覽器會裁剪該圖片早抠。
CSS 代碼:
.container > div > img {
? ? width: 100%;
? ? height: 100%;
? ? object-fit: cover;
}
效果如下：
就是這么簡單！你已經(jīng)了解了 CSS Grid 中最復(fù)雜的概念之一撬讽，所以后面請自己動手吧蕊连。
瀏覽器支持
在我們結(jié)束之前，我還需要提及瀏覽器的支持游昼。在寫這篇文章的時候甘苍，占全球 77％ 的網(wǎng)站流量的瀏覽器支持CSS Grid，而且正在攀升烘豌。
我相信 2018 年將是 CSS Grid 大量應(yīng)用的一年载庭。很快會得到突破，并將成為前端開發(fā)人員的必備技能廊佩。就像過去幾年在 CSS Flexbox 所發(fā)生的一樣囚聚。
