前端布局之网格gird布局（简单易懂）

前言

弹性布局的文章很多，但是它是解决一维布局的，面对二维就显得无力了，此时我们就需要用到网格布局。（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时代的一大进步。