網(wǎng)格布局

網(wǎng)格布局（Grid）是將網(wǎng)頁劃分成一個(gè)個(gè)網(wǎng)格單元，可任意組合不同的網(wǎng)格，輕松實(shí)現(xiàn)各種布局效果，也是目前CSS中最強(qiáng)大布局方案，比Flex更強(qiáng)大。

基本概念

容器和項(xiàng)目

當(dāng)一個(gè) HTML 元素將 display 屬性設(shè)置為 grid 或 inline-grid（設(shè)成行內(nèi)元素） 后，它就變成了一個(gè)網(wǎng)格容器（container），這個(gè)元素的所有直系子元素將成為網(wǎng)格元素，稱為項(xiàng)目（item）。

.box { display: grid | inline-grid; 
}

設(shè)為網(wǎng)格布局以后，容器子元素（項(xiàng)目）的float、display: inline-block、display: table-cell、vertical-align等設(shè)置都將失效。

行和列

容器里面的水平區(qū)域稱為"行"（row），垂直區(qū)域稱為"列"（column）。

網(wǎng)格線

劃分網(wǎng)格的線，稱為"網(wǎng)格線"（grid line）。水平網(wǎng)格線劃分出行，垂直網(wǎng)格線劃分出列。
正常情況下，n行有n + 1根水平網(wǎng)格線，m列有m + 1根垂直網(wǎng)格線，比如三行就有四根水平網(wǎng)格線。

單元格

行和列的交叉區(qū)域，稱為"單元格"（cell）。 正常情況下，n行和m列會(huì)產(chǎn)生n x m個(gè)單元格。比如，3行3列會(huì)產(chǎn)生9個(gè)單元格。

圖示中綠的背景為4個(gè)單元格，單元格各自有一個(gè)項(xiàng)目item。
注意：需要區(qū)分單元格和項(xiàng)目元素，比如一個(gè)3*3的九宮格，項(xiàng)目元素不一定就是9個(gè)，項(xiàng)目元素個(gè)數(shù)由開發(fā)者決定。

容器屬性

grid-template-columns、 grid-template-rows

• grid-template-columns屬性定義每一列的列寬
• grid-template-rows屬性定義每一行的行高

1. 固定值 px

.container {display: grid;grid-template-columns: 50px 100px 50px;grid-template-rows: 50px 100px 50px;
}

2. 百分比 %

.container {display: grid;grid-template-columns: 25% 25% 25% 25%;grid-template-rows: 50% 50%;
}

3. repeat()

重復(fù)寫同樣的值非常麻煩，尤其網(wǎng)格很多時(shí)?？梢允褂胷epeat()函數(shù)，簡化重復(fù)的值。

將上面的代碼用repeat()改寫如下：

.container {display: grid;grid-template-columns: repeat(4,25%);grid-template-rows: repeat(2,50%);
}

repeat()接受兩個(gè)參數(shù)

• 參數(shù)一：重復(fù)的次數(shù)（上例分別是列為4，行為2）
• 參數(shù)二：重復(fù)的值。

repeat()重復(fù)某種模式也是可以的。

.container {display: grid;grid-template-columns: repeat(2, 40px 60px 80px);grid-template-rows: repeat(2,50%);
}

上述代碼是將列寬為40px、60px、80px重復(fù)2次；行高2行，等分容器的高度。

4. fr
   為了方便表示比例關(guān)系，網(wǎng)格布局提供了fr關(guān)鍵字（fraction 的縮寫，意為"片段"）。

.container {width: 300pxdisplay: grid;grid-template-columns: 1fr 2fr 1fr;
}

同時(shí)，fr可以與絕對長度的單位結(jié)合使用，這時(shí)會(huì)非常方便。

.container {width: 300pxdisplay: grid;grid-template-columns: 1fr 100px 2fr
}

上面代碼表示，第二列的寬度為固定的100px，第三列的寬度是第一列的2倍。

5. minmax()
   minmax()函數(shù)產(chǎn)生一個(gè)長度范圍，表示長度就在這個(gè)范圍之中。它接受兩個(gè)參數(shù)，分別為最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代碼表示，第三列的寬度不小于100px，不大于1fr。
6. auto
auto關(guān)鍵字表示由瀏覽器自己決定長度。

.container {width: 300pxdisplay: grid;grid-template-columns: 50px auto 50px;
}

上面代碼中，第二列的寬度為容器寬度除第一、第三列的總寬度外所占最大的寬度，除非單元格內(nèi)容設(shè)置了min-width，且這個(gè)值大于最大寬度。

7. auto-fill、auto-fit
   auto-fill 與 auto-fit 直譯為 自適應(yīng) 與 自填充，一般用來實(shí)現(xiàn)自適應(yīng)布局的。

.container {display: grid;grid-template-columns: repeat(auto-fill, 100px);
}

auto-fill：

If the grid container has a definite or maximal size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.

如果網(wǎng)格容器在相關(guān)軸上具有確定的大小或最大大小，則重復(fù)次數(shù)是最大可能的正整數(shù)，不會(huì)導(dǎo)致網(wǎng)格溢出其網(wǎng)格容器。

.container {width: 400px;display: grid;grid-template-columns: repeat(auto-fill, minmax(200px , 1fr));
}

auto-fit：

Behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed。

行為與 auto-fill 相同，除了放置網(wǎng)格項(xiàng)目后，所有空的重復(fù)軌道都將消失。簡單來說，就是如果元素?cái)?shù)量不夠放滿一行，則 auto-fit 會(huì)將元素平鋪，鋪滿一行。

.container {width: 400px;display: grid;grid-template-columns: repeat(auto-fit, minmax(200px , 1fr));
}

8. 網(wǎng)格線名稱
   grid-template-columns屬性和grid-template-rows屬性里面，還可以使用方括號，指定每一根網(wǎng)格線的名字，方便以后的引用。

.container {display: grid;grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];grid-template-rows:    [r1] 100px [r2] 100px [r3] 100px [r4];
}

上述代碼表示 3*3 的九宮格，4根垂直的網(wǎng)格線的名稱分別是c1、c2、c3、c4；4根水平的網(wǎng)格線名稱分別是：r1、r2、r3、r4。

同時(shí)網(wǎng)格布局允許同一根線有多個(gè)名字，比如：

grid-template-columns: [c1 c11 c111] 100px [c2 c22] 100px [c3] 100px [c4];