## **GRID布局**

　　它將網(wǎng)頁劃分成一個個網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局

　　Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內(nèi)部多個項(xiàng)目的位置。但是，它們也存在重大區(qū)別。

　　Flex 布局是軸線布局，只能指定"項(xiàng)目"針對軸線的位置，可以看作是一維布局。

　　Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局。

　　

　　## **GRID布局預(yù)熱**

　　- 容器和項(xiàng)目

　　```text

　　```

　　- 行和列

　　

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

　　- 單元格

　　

　　行和列的交叉區(qū)域，稱為"單元格"。

　　- 網(wǎng)格線

　　

　　劃分網(wǎng)格的線，稱為"網(wǎng)格線"。水平網(wǎng)格線劃分出行，垂直網(wǎng)格線劃分出列。

　　## **GRID屬性**

　　**容器屬性:添加在容器元素**

　　1、啟動網(wǎng)格布局

　　```html

　　display:grid

　　/*

　　屬性值：

　　grid 為塊狀網(wǎng)格容器 (容器自上而下排列)

　　line-grid 為內(nèi)聯(lián)網(wǎng)格容器(容器橫向排列)

　　*/

　　```

　　2、劃分行和列

　　```html

　　grid-template-columns:

　　grid-template-rows:

　　```

　　- 屬性值：絕對大小(根據(jù)列數(shù)或者行數(shù)確定值的個數(shù)) 例：200px 200px 200px

　　```html

　　grid-template-columns:200px 200px 200px

　　grid-template-rows:200px 200px 200px

　　```

　　

　　- 屬性值：百分比(根據(jù)列數(shù)或者行數(shù)確定值的個數(shù)) 例：33.33% 33.33% 33.33%

　　```html

　　grid-template-columns:33.33% 33.33% 33.33%

　　grid-template-rows:33.33% 33.33% 33.33%

　　```

　　

　　- 功能函數(shù)：repeat()

　　```html

　　repeat(參數(shù)1，參數(shù)2)

　　/*

　　參數(shù)1 ： 重復(fù)的次數(shù)

　　參數(shù)2 ： 重復(fù)的數(shù)值或者重復(fù)的模式

　　eg:

　　grid-template-columns：repeat(3,33.33%);

　　等同

　　grid-template-columns:33.33% 33.33% 33.33%

　　*/

　　```

　　- auto-fill關(guān)鍵字( 自動填充 )

　　```html

　　grid-template-columns：repeat(auto-fill,33.33%);

　　/*

　　當(dāng)項(xiàng)目寬高固定，容器不固定的情況下，自動填充網(wǎng)格列數(shù)

　　*/

　　```

　　

　　- fr關(guān)鍵字(列寬片段)

　　為了方便表示比例關(guān)系，網(wǎng)格布局提供了fr關(guān)鍵字(fraction 的縮寫，意為"片段")。如果兩列的寬度分別為1fr和2fr，就表示后者是前者的兩倍。

　　```html

　　grid-template-columns:1fr 3fr 1fr;

　　grid-template-rows:repeat(3,100px);

　　```

　　

　　- minmax() 功能函數(shù)

　　```html

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

　　/*

　　minmax(100px, 1fr)表示列寬不小于100px，不大于1fr

　　*/

　　```

　　- auto 關(guān)鍵字 自動填充

　　```html

　　grid-template-columns:30px auto 20px;

　　grid-template-rows:repeat(3,100px);

　　```

　　

　　- 網(wǎng)格線名稱

　　```html

　　grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];

　　grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];

　　/*

　　指定網(wǎng)格布局為3行x3列，因此有4根垂直網(wǎng)格線和4根水平網(wǎng)格線。方括號里面依次是這八根線的名字。

　　*/

　　```

　　3、設(shè)置行間距 || 列間距

　　```html

　　grid-row-gap:20px /* 行間距 */

　　grid-column-gap:20px /* 列間距 */

　　grid-gap:30px 30px /* 復(fù)合式寫法 */

　　/*注：新版本已經(jīng)省略 grid- 前綴 row-gap \ column-gap \ gap*/

　　```

　　

　　4、指定"區(qū)域"(area)，一個區(qū)域由單個或多個單元格組成。

　　```html

　　display: grid;

　　grid-template-columns: 100px 100px 100px;

　　grid-template-rows: 100px 100px 100px;

　　grid-template-areas: 'a b c'

　　'd e f'

　　'g h i';

　　/*

　　將整個網(wǎng)格容器分為9個區(qū)域，每個區(qū)域?qū)?yīng)一個單元格

　　通過grid-area 指定項(xiàng)目名稱。

　　*/

　　display:grid;

　　grid-template-columns:repeat(3,100px);

　　grid-template-rows:repeat(3,100px);

　　grid-template-areas: 'a a a'

　　'. . b'

　　'. c c';

　　```

　　

　　5、規(guī)劃子元素放置的順序(默認(rèn)為先排行后排列)

　　```html

　　grid-auto-flow: column | row;

　　/*

　　row dense和column dense。

　　這兩個值主要用于，某些項(xiàng)目指定位置以后，剩下的項(xiàng)目怎么自動放置。

　　*/

　　```

　　6、設(shè)置單元格內(nèi)容在單元格內(nèi) 水平 | 垂直 的對齊方

　　```html

　　justify-items: start | end | center | stretch;

　　align-items: start | end | center | stretch;

　　place-items: /*復(fù)合式寫法*/

　　/*

　　start：對齊單元格的起始邊緣。

　　end：對齊單元格的結(jié)束邊緣。

　　center：單元格內(nèi)部居中。

　　stretch：拉伸，占滿單元格的整個寬度(默認(rèn)值)。

　　*/

　　```

　　

　　7、設(shè)置整個內(nèi)容區(qū)域在容器里面的水平 | 垂直 對齊方式

　　```html

　　justify-content:start | end | center | stretch | space-around | space-between | space-evenly;

　　align-content: start | end | center | stretch | space-around | space-between | space-evenly;

　　place-content: /* 復(fù)合式寫法 */

　　/*

　　start - 對齊容器的起始邊框。

　　end - 對齊容器的結(jié)束邊框。

　　center - 容器內(nèi)部居中。

　　stretch - 項(xiàng)目大小沒有指定時，拉伸占據(jù)整個網(wǎng)格容器。

　　space-around - 每個項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與容器邊框的間隔大一倍。

　　space-between - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間沒有間隔。

　　pace-evenly - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間也是同樣長度的間隔。

　　*/

　　```

　　

　　## **項(xiàng)目屬性：添加在子元素上面**

　　1、指定項(xiàng)目的四個邊框，分別定位在哪根網(wǎng)格線。

　　```html

　　grid-column-start

　　grid-column-end

　　grid-row-start

　　grid-row-end

　　/*

　　grid-column-start屬性：左邊框所在的垂直網(wǎng)格線

　　grid-column-end屬性：右邊框所在的垂直網(wǎng)格線

　　grid-row-start屬性：上邊框所在的水平網(wǎng)格線

　　grid-row-end屬性：下邊框所在的水平網(wǎng)格線

　　*/

　　grid-column-start:1;

　　grid-column-end:3;

　　grid-row-start: 2;

　　grid-row-end:4;

　　```

　　

　　2、grid-column ， grid-row

　　grid-column屬性是grid-column-start和grid-column-end的合并簡寫形式 grid-row屬性是grid-row-start屬性和grid-row-end的合并簡寫形式。

　　```html

　　grid-column: 1 / 3;

　　grid-row: 1 / 2;

　　```

　　**- End -**

　　更多關(guān)于“html5培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢想。