如何用一簡單的CSS製作響應式HTML網頁
在這篇文章中，我將教你如何使用CSS網格來建立一個超級酷的影象網格，它隨著螢幕的寬度而改變列的數量。
最讚的一點就是：這個響應式效果只需要新增一行CSS。
這意味著我們不必給HTML取很亂的類名（即col-sm-4，col-md-8），或者為每一個螢幕大小建立媒體查詢。
現在讓我們開始吧！
設定
對
於本文，我們將繼續使用我們在第一篇CSS Grid文章中使用的網格。然後我們將在文章的最後新增圖片。以下是我們的初始網格的外觀：
這是HTML：
<DIV類= “容器”>
<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 Grid沒有任何關係。如果這段程式碼讓你感到困惑，我建議你閱讀我5分鐘學習CSS網格的文章，在這裡我將介紹佈局模組的基礎知識。
讓我們開始讓列響應。
基本的響應式與分數單位
CSS網格帶來了一個全新的值---分數單位。分數單位是fr，它允許你將容器分成儘可能多的分數。
讓我們將每個列更改為一個分數單位的寬度。
.container {
display：grid;
grid-template-columns：1fr 1fr 1fr;
grid-template-rows：50px 50px;
}這裡發生的事情是網格將整個寬度分成三部分，每一列都佔用一個單位。結果如下：
如果我們將該grid-template-columns值更改為1fr 2fr 1fr，則第二列現在將是另外兩列的兩倍。現在的總寬度是四個分數單位，第二個佔了兩個，而其他的佔了一個。這將是效果圖：
換句話說，分數單位值使您可以非常容易地改變列的寬度。
先進的響應能力
然而，上面的例子並沒有給我們想要的響應，因為這個網格總是三列寬。我們希望我們的網格使用容器的寬度來改變列的數量。要做到這一點，你必須學習三個新的概念。
重複（）
我們將從這個repeat()函式開始。這是指定列和行的更強大的方法。讓我們把我們原來的網格，並改變使用repeat（）：
.container {
display：grid;
grid-template-columns：repeat（3，100px）;
grid-template-rows：repeat（2，50px）;
}換句話說，repeat(3, 100px)是相同的100px 100px 100px。第一個引數指定了你想要的列數或行數，第二個引數指定了它們的寬度，所以這將給我們提供和我們剛開始一樣的佈局。
自動調整
然後是自動適應。讓我們跳過固定數量的列，而是用3替換auto-fit。
.container {
display：grid;
grid-gap：5px;
grid-template-columns：repeat（auto-fit，100px）;
grid-template-rows：repeat（2，100px）;
}這會導致以下行為：
網格現在使用容器的寬度來改變列的數量。
它只是試圖儘可能多地將100px寬的列安裝到容器中。但是，如果我們將所有列的硬編碼精確到100畫素，我們將永遠不會獲得我們想要的靈活性，因為它們很少會新增到整個寬度。正如你在上面的gif中看到的，網格經常會在右側留下空白。
MINMAX（）
為了解決這個問題，我們需要最終的成分minmax()。我們將簡單地替換100px minmax(100px, 1fr)。這是最終的CSS。
.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。但是，如果有更多的可用空間，網格將簡單地分配給每個列，因為列變成一個分數單位，而不是100畫素。
新增影象
現在最後一步是新增影象。這與CSS Grid沒有任何關係，但是我們還是要看程式碼。
我們將在每個網格專案內新增一個圖片標籤。
<div> <img src =“img / forest.jpg”/> </ div>為了使影象適合專案，我們將它設定為與專案本身一樣寬和高，然後使用object-fit: cover;。這將使影象覆蓋整個容器，如果需要的話，瀏覽器將裁剪它。
.container> div> img {
width：100％;
height：100％
object-fit：cover;
}結果如下：
而就是這樣！您現在知道了CSS Grid中最複雜的概念之一，所以請給自己一個機會。
瀏覽器支援
在我們結束之前，我還需要提及瀏覽器支援。在寫這篇文章的時候，全球77％的網站流量支援CSS Grid，而且正在攀升。
我相信2018年將是CSS Grid的一年。它將獲得突破，並將成為前端開發人員的必備技能。就像過去幾年CSS Flexbox發生的一樣。
