一行 CSS 代碼實現(xiàn)響應(yīng)式布局 – 使用 Grid 實現(xiàn)的響應(yīng)式布局

 class="container">
 ?
1
 ?
2
 ?
3
 ?
4
 ?
5
 ?
6

還有相應(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ǔ)知識。

讓我們開始將 列 實現(xiàn)響應(yīng)式布局。

使用等分(fr)單位實現(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 倍?？倢挾痊F(xiàn)在是 4 等分，第 2 列占據(jù)了 2 等分，而其他 2 列則各占 1 等分。看起來類似這樣：

換句話說，等分單位值使你可以非常容易地改變列的寬度。

更加高級的響應(yīng)式

但是，上面的例子并沒有給我們想要的響應(yīng)式，因為這個網(wǎng)格總是包含 3 列。我們希望我們的網(wǎng)格根據(jù)容器的寬度來改變列的數(shù)量。要做到這一點，你必須學(xué)習(xí)三個新的概念。

repeat()

我們將從?repeat()?函數(shù)開始。 這是指定列和行更強大的方法。 讓我們把原來的網(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);
}

它只是試圖盡可能多地將?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 代碼:

 src="img/forest.jpg"/>

為了使圖像適合該網(wǎng)格項，我們將它設(shè)置為與網(wǎng)格項一樣寬和高，然后使用?object-fit: cover;。這將使圖片覆蓋整個容器，如果需要的話，瀏覽器會裁剪該圖片。

CSS 代碼:

.container > div > img {
 ? ?width: 100%;
 ? ?height: 100%;
 ? ?object-fit: cover;
}