grid網(wǎng)格布局

前言

彈性布局的文章很多，但是它是解決一維布局的，面對(duì)二維就顯得無力了，此時(shí)我們就需要用到網(wǎng)格布局。（ps：一維就是一列或者一行的布局，當(dāng)你遇到九宮盒布局，此時(shí)涉及到列與行，便是二維布局了，常見于電商網(wǎng)站的商品展示）；看這篇文章，建議你自己建個(gè)html，跟著敲一敲，更利于理解。

為什么用網(wǎng)格布局？

很多同學(xué)可能會(huì)覺得，我用浮動(dòng)，定位，彈性盒模型可以實(shí)現(xiàn)絕大多數(shù)樣式布局呀，為什么還要新學(xué)一個(gè)網(wǎng)格布局呢。就像你以前用jquery，為什么后來用mvvm框架呢，因?yàn)樗茏屛覀儗?shí)現(xiàn)起來更效率，也很利于維護(hù)。

進(jìn)入主題：

最基本代碼：（體驗(yàn) gird 的第一個(gè)好處，align-items:center垂直居中，媽媽再也不要擔(dān)心我搞不定垂直居中了。）

<style>.box {width: 300px;display: grid;align-items:center;}.box>div{background: gray;text-align: center;font-size: 24px;border: 2px solid white;} </style><div class="box"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div> </div>

一、Columns(列) 和 rows(行)

1）更改上面的.box里面樣式：（3列和2行）

.box {width: 300px;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 50px 50px;}

解說：

• grid-template-columns是建立列。如上圖，行的寬度是100px，我們寫了3個(gè)100px，就是3列；是不是挺簡(jiǎn)單。
• grid-template-rows是建立行。如上圖，行的高度是50px，我們寫了2個(gè)50px，就是2行。

2）我們用fr屬性，依舊只改.box屬。

.box {width: 300px;display: grid;grid-template-columns: 1fr 2fr 3fr;/*grid-template-columns: repeat(3, 1fr) 50px; 隱藏方法repeat，代表循環(huán)創(chuàng)建*//*grid-template-columns: repeat(3, 1fr) 50px; 隱藏方法minmax(100px, auto)，第一個(gè)參數(shù)是最小值，第二個(gè)參數(shù)是最大值*/grid-template-rows: 1fr 2fr;}

看懂沒，fr表示平均分配的比例，你可以打開控制臺(tái)看下，columns的1，2，3元素分別是50px，100px，150px；rows也是分成1份和2份，但是它還會(huì)自動(dòng)垂直居中，所以上下兩端有留白。

3）來點(diǎn)有難度的,（在 grid(網(wǎng)格) 上放置 items(子元素)）
重寫一下dom和css，避免混亂。

<style>.box {width: 300px;display: grid;align-items:center;/* justify-items: center;*/grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}.box>div{padding: 30px 0;background: gray;text-align: center;font-size: 24px;border: 2px solid white;} </style><div class="box"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div><div class="item6">6</div> </div>

得到一個(gè)九宮盒，填滿6個(gè)方塊，另外三個(gè)空著。

先解釋一個(gè)疑惑：我為什么用padding，還用text-align: center,我們注釋掉的justify-items: center也能實(shí)現(xiàn)水平居中。原因就是gird的居中不是針對(duì)文字的，而是你這個(gè)div，沒有padding值，背景圖無法撐滿，自己試試就明白了。

---

二、grid-column-start和 grid-column-end

• 說重點(diǎn)：我們給Item1一個(gè)樣式：

.item1 {grid-column-start: 1;grid-column-end: 4; }

是不是有點(diǎn)懵，啥情況，聽我娓娓道來，你會(huì)覺得原來如此。九宮盒的 grid-column是從1-9，grid-column-start表示我開始的地方是第1個(gè)盒子，grid-column-end表示我結(jié)束地方是第4個(gè)盒子（其實(shí)是第4個(gè)盒子之前結(jié)束），所以其實(shí)是1-3是item1占領(lǐng)的，后面的自動(dòng)往后順延。自己試試改一改屬性就明白了。

---

三、grid-gap

只改.box樣式

.box {width: 300px;display: grid;align-items:center;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-gap: 10px;}

不貼圖了， 你會(huì)發(fā)現(xiàn)，網(wǎng)格項(xiàng)之間添加一個(gè)間隙。有多好用，之前加空隙，用margin你會(huì)特?zé)o語(yǔ)，很難處理，這個(gè)就so easy。grid-column-gap和grid-row-gap分別改變列與行網(wǎng)格間隙。

---

四、實(shí)戰(zhàn)（實(shí)現(xiàn)如下圖的效果：傳說中的十二柵格系統(tǒng)）

只改.box樣式

<style>.box {display: grid; grid-template-columns: repeat(12, 1fr);grid-template-rows: 50px 350px 50px;grid-gap: 5px;grid-template-areas:"h h h h h h h h h h h h""m m c c c c c c c c c c""f f f f f f f f f f f f";}.header {grid-area: h;background: greenyellow;}.menu {grid-area: m;background: blue;}.content {grid-area: c;background: coral;}.footer {grid-area: f;background: purple;}.box>div{font-size: 24px;text-align: center;} </style><div class="box"> <div class="header">header</div><div class="menu">menu</div><div class="content">content</div><div class="footer">footer</div> </div>

這里唯一新屬性就是grid-template-areas，咋一看，有點(diǎn)暈。仔細(xì)說來：

• 1、grid-template-columns: repeat(12, 1fr);先在列上面制作12柵格系統(tǒng)。
• 2、grid-template-rows: 50px 350px 50px;再制作三行，高度不同。形成3*12 = 36個(gè)單元格。
• 3、 grid-template-areas將這36個(gè)單元格平分，就是打標(biāo)。h代表header、m代表menu、c代表content、f代表footer。看上述寫的正好平分了36份，然后我們?cè)谧訕邮絞rid-area對(duì)應(yīng)找到屬于自己的標(biāo)簽。其實(shí)還是不難理解的。

---

延伸：我們配合響應(yīng)式多媒體查詢@media screen能實(shí)現(xiàn)各種之前很難實(shí)現(xiàn)的效果。gird真正做到了結(jié)構(gòu)和表現(xiàn)分離，是css時(shí)代的一大進(jìn)步。

總結(jié)

以上是生活随笔為你收集整理的前端布局之网格gird布局（简单易懂）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。