【譯】一行css代碼搞定響應式佈局

譯文出自：閃電礦工翻譯組

原文地址: medium.com/free-code-c…

原文做者: Per Harald Borgen

倉庫原文連接：issue

譯者: hanxiansen

在這篇文章中，我將教你如何使用 CSS Grid 來建立一個超酷的圖像網格圖，它將根據屏幕的寬度來改變列的數量。最精彩的地方在於：全部的響應特性被添加到了一行 css 代碼中。這意味着咱們沒必要將 HTML 與醜陋的類名(如col-sm-4, col-md-8)混雜在一塊兒，也沒必要爲每一個屏幕建立媒體查詢。ok，讓咱們發車吧。

設置

在本文中，我將繼續使用我在第一篇 CSS Grid 佈局教程文章中的網格佈局。而後，咱們將在文章末尾添加圖片。下面是咱們初始化網格的外觀：

HTML 代碼：

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
複製代碼

CSS 代碼：

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}
複製代碼

注意: 示例中有一些基礎的樣式，但我在這裏沒有寫出來，由於這對 CSS 網格佈局沒有任何影響

若是這段代碼讓你感到困惑，我建議你去好好讀下個人這篇文章Learn CSS Grid in 5 minutes ，其中就詳細的解釋了佈局的基礎知識。

讓咱們讓列開始具備自適應特性吧。

基礎響應單位: fraction

CSS 柵格佈局帶來了一個全新的值:fraction單位，fraction單位一般簡寫爲fr，它容許你根據須要將容器拆分爲多個塊。

讓咱們將每一列更改成一個 fraction 單位寬:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}
複製代碼

結果是柵格佈局將會把整個寬度分紅三個 fraction，每列佔據一個 fraction 單位，效果以下：

若是咱們將grid-template-columns的值更改成1fr 2fr 3fr，第二列的寬度將會是其它兩列的兩倍。總寬如今是四個 fraction 單位，第二列佔據兩個 fraction 單位，其它列各佔一個 fraction。效果以下：

總的來講，fraction 單位值將使你能夠很容易的更改列的寬度。

高級響應

然而，上面列子並無給出咱們想要的響應性，由於網格老是三列寬。咱們但願網格能根據容器的寬度改變列的數量。要作到這一點，你必須學習以下三個概念：

repeat()

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

.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替換爲自適應數量：

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}
複製代碼

效果以下:

如今，柵格將會根據容器的寬度調整其數量。它會嘗試在容器中容納儘量多的 100px 寬的列。但若是咱們將全部列硬寫爲 100px，咱們將永遠無法得到所需的彈性，由於它們很難填充整個寬度。正如你在上圖看到的，網格一般在右側留有空白。

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);
}
複製代碼

請注意，全部響應都發生在一行 css 代碼中

效果以下：

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

所以，如今每列將至少爲 100px。但若是有更多的可用空間，柵格佈局將簡單地將其均分給每列，由於這些列變成了 fraction 單位，而不是 100px。

添加圖片

最後一步是添加圖片。這與 CSS Grid 佈局無關，但讓咱們看下代碼。

咱們在每一個網格中添加一個圖片標籤：

<div><img src="img/forest.jpg"/></div>
複製代碼

爲了使圖片適應於每一個條目，咱們將其寬、高設置爲與條目自己同樣，咱們使用object-fit:cover。這將使圖片覆蓋它的整個容器，根據須要，瀏覽器將會對其進行裁剪。

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
複製代碼

效果以下：

ok！如今你已經瞭解了 CSS Grid 佈局中最複雜的概念之一了，請給本身一個贊吧。

瀏覽器兼容性

在結束本文前，我提下瀏覽器支持狀況，在撰寫本文時，全球77%的網站將支持 CSS Grid，並且比例還在逐步攀升。

我想一想2018將是 CSS 網格佈局的元年。它將得到突破，併成爲前端開發者的必備技能，就像過去幾年 CSS Flexbox 佈局發生的狀況同樣。