更新時間：2019-11-27首先我們進(jìn)行一個網(wǎng)格布局，下邊是初始化網(wǎng)格
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;
}
然后我們進(jìn)行基礎(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;
}
效果如下：
如果我們將grid-template-columns的值更改為1fr 2fr 3fr，第二列的寬度將會是其它兩列的兩倍�？倢挰F(xiàn)在是四個 fraction 單位，第二列占據(jù)兩個 fraction 單位，其它列各占一個 fraction，總的來說，fraction 單位值將使你可以很容易的更改列的寬度。
高級響應(yīng)，然而，上面列子并沒有給出我們想要的響應(yīng)性，因為網(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ù)指定它們的寬度，因此它將為我們提供與開始時完全相同的布局：
t然后是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)沒法獲得所需的彈性，因為它們很難填充整個寬度。正如你在上圖看到的，網(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);
}
正如你所見，效果完美。minmax()函數(shù)定義的范圍大于或等于 min， 小于或等于 max。
因此，現(xiàn)在每列將至少為 100px。但如果有更多的可用空間，柵格布局將簡單地將其均分給每列，因為這些列變成了 fraction 單位，而不是 100px。
