今天介绍一个新的布局神器---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;
}
