一行css代碼搞定響應式布局

設定

在本文中，我将繼續使用我在第一篇 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;
}
           

基礎響應機關: 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);
}
           

正如你所見，效果完美。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;
}
           

效果如下：