grid網格布局

前言

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

為什么用網格布局？

很多同學可能會覺得，我用浮動，定位，彈性盒模型可以實現絕大多數樣式布局呀，為什么還要新學一個網格布局呢。就像你以前用jquery，為什么后來用mvvm框架呢，因為它能讓我們實現起來更效率，也很利于維護。

進入主題：

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

<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個100px，就是3列；是不是挺簡單。
• grid-template-rows是建立行。如上圖，行的高度是50px，我們寫了2個50px，就是2行。

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

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

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

3）來點有難度的,（在 grid(網格) 上放置 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>

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

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

---

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

• 說重點：我們給Item1一個樣式：

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

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

---

三、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;}

不貼圖了， 你會發現，網格項之間添加一個間隙。有多好用，之前加空隙，用margin你會特無語，很難處理，這個就so easy。grid-column-gap和grid-row-gap分別改變列與行網格間隙。

---

四、實戰（實現如下圖的效果：傳說中的十二柵格系統）

只改.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，咋一看，有點暈。仔細說來：

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

---

延伸：我們配合響應式多媒體查詢@media screen能實現各種之前很難實現的效果。gird真正做到了結構和表現分離，是css時代的一大進步。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。