【CSS】903- 快速搞定響應(yīng)式布局
作者：icepy @知乎專欄
https://zhuanlan.zhihu.com/p/69809343
在這篇文章中，我將教你如何使用 CSS Grid 來創(chuàng)建一個超酷的圖像網(wǎng)格圖，它將根據(jù)屏幕的寬度來改變列的數(shù)量。最精彩的地方在于：所有的響應(yīng)特性被添加到了一行 css 代碼中。這意味著我們不必將 HTML 與丑陋的類名(如col-sm-4, col-md-8)混雜在一起，也不必為每個屏幕創(chuàng)建媒體查詢。ok，讓我們發(fā)車吧。
設(shè)置
在本文中，我將繼續(xù)使用我在第一篇 CSS Grid 布局教程文章中的網(wǎng)格布局。然后，我們將在文章末尾添加圖片。下面是我們初始化網(wǎng)格的外觀：
HTML 代碼：
<div class="container"><div>1div><div>2div><div>3div><div>4div><div>5div><div>6div>div>
CSS 代碼：
.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 50px 50px;}
注意: 示例中有一些基礎(chǔ)的樣式，但我在這里沒有寫出來，因?yàn)檫@對 CSS 網(wǎng)格布局沒有任何影響
如果這段代碼讓你感到困惑，我建議你去好好讀下我的這篇文章Learn CSS Grid in 5 minutes ，其中就詳細(xì)的解釋了布局的基礎(chǔ)知識。
讓我們讓列開始具有自適應(yīng)特性吧。
基礎(chǔ)響應(yīng)單位: fraction
CSS 柵格布局帶來了一個全新的值:fraction單位，fraction單位通常簡寫為fr，它允許你根據(jù)需要將容器拆分為多個塊。
讓我們將每一列更改為一個 fraction 單位寬:
.container {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 50px 50px;}
結(jié)果是柵格布局將會把整個寬度分成三個 fraction，每列占據(jù)一個 fraction 單位，效果如下：
如果我們將grid-template-columns的值更改為1fr 2fr 1fr，第二列的寬度將會是其它兩列的兩倍。總寬現(xiàn)在是四個 fraction 單位，第二列占據(jù)兩個 fraction 單位，其它列各占一個 fraction。效果如下：
總的來說，fraction 單位值將使你可以很容易的更改列的寬度。
高級響應(yīng)
然而，上面列子并沒有給出我們想要的響應(yīng)性，因?yàn)榫W(wǎng)格總是三列寬。我們希望網(wǎng)格能根據(jù)容器的寬度改變列的數(shù)量。要做到這一點(diǎn)，你必須學(xué)習(xí)如下三個概念：
repeat()
首先我們學(xué)習(xí)repeat()函數(shù)。這是一個強(qiáng)大的指定列和行的方法。讓我們使用repeat()函數(shù)來更改網(wǎng)格:
.container {display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(2, 50px);}
在上面代碼中，repeat(3, 100px)等于100px 100px 100px。第一個參數(shù)指定行與列的數(shù)量，第二個參數(shù)指定它們的寬度，因此它將為我們提供與開始時完全相同的布局：
auto-fit
然后是auto-fit。讓我們跳過固定數(shù)量的列，將3替換為自適應(yīng)數(shù)量：
.container {display: grid;grid-gap: 5px;grid-template-columns: repeat(auto-fit, 100px);grid-template-rows: repeat(2, 100px);}
效果如下:
現(xiàn)在，柵格將會根據(jù)容器的寬度調(diào)整其數(shù)量。它會嘗試在容器中容納盡可能多的 100px 寬的列。但如果我們將所有列硬寫為 100px，我們將永遠(yuǎn)沒法獲得所需的彈性，因?yàn)樗鼈兒茈y填充整個寬度。正如你在上圖看到的，網(wǎng)格通常在右側(cè)留有空白。
minmax()
為了解決上述問題，我們需要minmax()。我們將 100px 替換為 minmax(100px, 1fr)，代碼如下：
.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 代碼中
效果如下：
正如你所見，效果完美。minmax()函數(shù)定義的范圍大于或等于 min， 小于或等于 max。因此，現(xiàn)在每列將至少為 100px。但如果有更多的可用空間，柵格布局將簡單地將其均分給每列，因?yàn)檫@些列變成了 fraction 單位，而不是 100px。
添加圖片
最后一步是添加圖片。這與 CSS Grid 布局無關(guān)，但讓我們看下代碼。
我們在每個網(wǎng)格中添加一個圖片標(biāo)簽：
<div><img src="img/forest.jpg"/>div>將object-fit 設(shè)置成cover，這將使圖片覆蓋它的整個容器，根據(jù)需要，瀏覽器將會對其進(jìn)行裁剪。
.container > div > img {width: 100%;height: 100%;object-fit: cover;}
效果如下：
ok！現(xiàn)在你已經(jīng)了解了 CSS Grid 布局中最復(fù)雜的概念之一了，請給自己一個贊吧。
瀏覽器兼容性
在結(jié)束本文前，我提下瀏覽器支持情況，在撰寫本文時，全球77%的網(wǎng)站將支持 CSS Grid，而且比例還在逐步攀升。
我想想2018將是 CSS 網(wǎng)格布局的元年。它將獲得突破，并成為前端開發(fā)者的必備技能，就像過去幾年 CSS Flexbox 布局發(fā)生的情況一樣。
回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點(diǎn)擊“閱讀原文”查看70+篇原創(chuàng)文章
