grid布局

1.什么是grid布局?

Flex布局是軸線布局，只能指定"項(xiàng)目"針對(duì)軸線的位置，可以看作是一維布局，Grid 布局則是將容器劃分成“行"和“列”，產(chǎn)生單元格，然后指定"項(xiàng)目所在”的單元格，可以看作是二維布局，Grid布局遠(yuǎn)比 Flex布局強(qiáng)大。(不過存在兼容性問題，使用之前應(yīng)看具體需求)

grid布局.png

2.布局方式----常用三種

1.傳統(tǒng)布局方式

利用position屬性 + display屬性 + float屬性布局, 兼容性最好, 但是效率低, 麻煩!

2.flex布局

有自己的一套屬性, 效率高, 學(xué)習(xí)成本低, 兼容性強(qiáng)!

3.grid布局 dispaly:grid;

網(wǎng)格布局(grid)是最強(qiáng)大的布局方案, 但是知識(shí)點(diǎn)比較多, 學(xué)習(xí)成本相對(duì)較高, 目前兼容性不如flex布局!

3.基本概念

1.容器---有容器屬性(container)

2.項(xiàng)目---有項(xiàng)目屬性(items)

Grid概念圖.png

Grid網(wǎng)格圖.png

4.容器屬性

1. grid-template-columns

2. grid-template-rows

3. grid ow-gap

4. grid-column-gap

5. grid-gap (3和4的簡(jiǎn)寫)

6. grid-template-areas

7. grid-auto-flow

8. justify-items

9. align-items

10. place-items(8和9的簡(jiǎn)寫)

11. justify-content

12. align-content

13. place-content(11和12的簡(jiǎn)寫)

14. grid-auto-columns

15. grid-auto-rows

(1)容器屬性 grid-template-*

1.你想要多少行或者列，就填寫相應(yīng)屬性值的個(gè)數(shù)，不填寫，自動(dòng)分配

容器屬性1.png

grid-template-columns:100px 100px 100px; // 顯示為三列每一列寬度100px 
grid-template-columns:repeat(3,100px);  //同上

2.auto-fill，有時(shí)，單元格的大小是固定的，但是容器的大小不確定，這個(gè)屬性就會(huì)自動(dòng)填充

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

auto-fill.png

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

grid-template-columns:repeat(4,1fr); // 寬度平均分成四等份 
grid-template-columns:1fr 2fr 3fr;   // 列寬這樣是分成6份各占 1 2 3 份 效果如下圖 

fr.png

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

grid-template-columns: 1fr minmax(150px，1fr);  // 第一個(gè)參數(shù)最小值,第二個(gè)最大值

minmax.png

5.auto，表示由瀏覽器自己決定長(zhǎng)度

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

auto.png

6.網(wǎng)格線．可以用方括號(hào)定義網(wǎng)格線名稱，方便以后給盒子定位使用

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

Grid網(wǎng)格圖.png

(2)容器屬性 grid-gap / grid-column-gap

一句話解釋就是，item(項(xiàng)目)相互之間的距離

gap.png

注意:根據(jù)最新標(biāo)準(zhǔn)，上面三個(gè)屬性名的grid-前綴已經(jīng)刪除, grid-column-gap和grid-row-gap寫成column-gap和row-gap，grid-gap寫成gap

（3）容器屬性 grid-template-areas

一個(gè)區(qū)域由單個(gè)或多個(gè)單元格組成，由你決定(具體使用，需要在項(xiàng)目屬性里面設(shè)置)

areas.png

名字相同表示在一個(gè)區(qū)域，定位或者寫項(xiàng)目屬性的時(shí)候會(huì)用到

（4）容器屬性 grid-auto-flow

劃分網(wǎng)格以后，容器的子元素會(huì)按照順序，自動(dòng)放置在每一個(gè)網(wǎng)格。默認(rèn)的放置順序是"先行后列".即先填滿第一行，再開始放入第二行(就是子元素的排放順序)

flow.png

dense.png

row dense屬性值表示換行時(shí)留下的空間可以由下面的元素填補(bǔ)上去

（5）容器屬性 justify-items(水平方向)/ align-items(垂直方向)

設(shè)置單元格內(nèi)容的水平和垂直的對(duì)齊方式

duiqi.png

place-items : start end； 這是兩個(gè)屬性的簡(jiǎn)寫

（6)容器屬性 justify-content (水平方向)/ align-content(垂直方向)

設(shè)置整個(gè)內(nèi)容區(qū)域（所有的項(xiàng)目的總和）的水平和垂直的對(duì)齊方式

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;   //水平方向
align-content: start | end | center | stretch | space-around | space-between | space-evenly;     // 垂直方向

(7)容器屬性grid-auto-columns / grid-auto-rows

用來(lái)設(shè)置多出來(lái)的項(xiàng)目寬和高

auto-rows.png

5.項(xiàng)目屬性

1. grid-column-start

2. grid-column-end

3. grid-row-start

4. grid-row-end

5. grid-column(1和2的簡(jiǎn)寫形式)

6. grid-row(3和4的簡(jiǎn)寫形式)

7. grid-area

8. justify-self

9. align-self

10. place-self (8和9的簡(jiǎn)寫形式)

(1)grid-column-start / grid-column-end grid-row-start / grid-row-end

一句話解釋，用來(lái)指定item的具體位置，根據(jù)在哪根網(wǎng)格線

items屬性.png

grid-column: 1 / 3; 前兩個(gè)的簡(jiǎn)寫

span.png

指定了項(xiàng)目所占的格數(shù)，跨列數(shù)

簡(jiǎn)寫全部grid-co-ro.png

(2)gird-area

1. 指定項(xiàng)目放在哪一個(gè)區(qū)域

area-items.png

2. grid-area 還是 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的縮寫形式 縮寫格式如下

grid-area:1 / 1 / 2 / 3;

(3)justify-self / align-self / place-self

self.png

place-self.png