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时代的一大进步。
