Grid布局

今天介绍一个新的布局神器---Grid布局，也叫做栅格布局。

本文分为以下几个部分：

给container定义grid属性
如何画栅格
如何往栅格里面添加内容
网格排列

给container定义grid属性

首先我们要给包含内容的container设置grid属性，这里有两种属性grid和inline-grid, inline-grid代表的是行内grid。
设置方法如下所示：

    .container {
      display: grid/inline-grid;
      width: 300px;
      height: 300px;
      border:solid 2px  pink;
    }

如何画栅格

当我们设置好了容器属性以后，第一步就是要想好怎么画好格子。
这个就相当于建筑图纸里面的标尺线，有了这个标尺，才能更规范的放内容。

我们通过设置行和列的长度来控制格子的布局，具体有三种方法：
1.用具体px值设定每一行/宽的长度

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

2.用百分比设定每一行/宽的长度

      grid-template-rows: 30% 40% 30%;
      grid-template-columns: 100px 100px 100px;

3.用fr设定每一行/宽的长度，这里的fr可以理解成当前占得的份数

      grid-template-rows: 1fr 2fr 1fr;
      grid-template-columns: 100px 100px 100px;

如果出现重复，可以使用repeat()函数，将重复值简写。

     grid-template-columns: 100px 100px 100px;
     //等价为
     grid-template-columns: repeat(3,100px);

如何往栅格里面添加内容

格子画好之后，第二步是要把内容放进去。
内容放在哪个格子里，放几个格子，都是我们要考虑的问题。

目前有两种方法，一个是行列定位法，一个是区域定位法。

1.行列定位法

行列定位发有三种实现方式。

设置行列编号
在我们画好格子以后，系统会对我们的边进行编号，如下图所示。

系统编号模式

我们通过设置行/列的起始边来进行定位，比如我们要把内容放在最中间的格子里，我们可以这样设置：

      grid-row-start:  2;   //=> 中心块行开始的编号为2号
      grid-row-end: 3;   //=> 中心块行开始的编号为3号
      grid-column-start: 2;   //=> 中心块行开始的编号为2号
      grid-column-end: 3;   //=> 中心块行开始的编号为3号

自定义行列名称
当格子很多的时候，用系统的编号可能会有点混乱，我们可以通过自定义行列的名称来进行定位，先在container里面设定行列的名称：

    .container {
      display: grid;
      width: 300px;
      height: 300px;
      border:solid 2px  pink;
      grid-template-rows: repeat(3, [r-start] 1fr [r-end]);
      grid-template-columns:repeat(3, [c-start] 1fr [c-end]);
    }

设置完之后，行列的编号就从系统编号变成下面的样子。

自定义名称

同样，如果我们要把内容放在最中间的格子里，我们可以这样设置：

      grid-row-start: r-start 2;   
      grid-row-end: r-end 2;
      grid-column-start: c-start 2;
      grid-column-end: c-end 2;

span扩张法
span可以理解成在原有基础上进行扩张。
举个例子，假设我们想让内容占据整个第一行，设置如下：

      grid-row-start: 1;   //=>开始的行数
      grid-row-end: 2;  //=>结束的行数
      grid-column-start: 1;   //=>开始的列数
      grid-column-end: span 3;  //=>在原有的开始列数后扩张了三个单位

2.区域定位法

区域定位法类似于买地的行为，卖家(container)将不同区块进行命名，买家买下该名字的地就拥有它的使用权。

以下面一种常用的布局形式来举例。

页面分为四个区块:
header:1号头部信息栏
nav:2号侧边导航栏
content:3号内容区域
footer4号底部信息栏

设置方法如下：

   //卖家起名字
    .container {
      display: grid;
      width: 300px;
      height: 450px;
      border:solid 2px  pink;
      grid-template-rows: 60px 1fr 60px;
      grid-template-columns: 60px 1fr;
      grid-template-areas: "header header"
      "nav main"
      "footer footer";
    }
    //买家购买相应的区域
     .header {
      grid-area: header;
    }
    .nav {
      grid-area: nav;
    }
    .main {
      grid-area: main;
    }
    .footer {
      grid-area: footer;
    }

网格排列

当网格的面积小于容器的面积的时候，为了界面的美观，可以设置网格排列属性。

水平排列：justify-content

.container {
  justify-content: left | right | center | space-between | space-around;
}

垂直排列：align-content

.container {
  align-content: baseline | end | center | space-between | space-around;
}