grid栅格布局详解

一、概述

如果说flex是为一维布局而存在的，那么grid是为二维布局而存在的。

grid布局被称为栅格布局，也被称为网格布局，他可以将网页划分为许多个方格，我们可以在网格中填充自己的内容。

二、grid布局的基本内容

1、术语

如下图

栅格线：图中，横向或者纵向的一条线
栅格轨道：由两条相邻栅格线所包围的部分
栅格区域：由栅格线包围的矩形区域
栅格单元：最小的栅格区域
栅格元素：栅格单元中放置的元素

2、定义

指定容器采用网格结构通过指定它的display属性值为grid或inline-grid。
grid表示指示容器采用块级结构。
inline-gird表示容器采用行内结构。

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

3、grid-template-columns 属性，grid-template-rows 属性

grid-template-columns用于设置纵向栅栏轨道的宽度和数量。
其语法格式如下

grid-template-columns: <length> <length> <length>;

各length用空格隔开，其大小表示纵向栅格轨道的宽度，数量表示栅格轨道的数量。

其中，grid布局有一种特有的单位fr。fr表示占剩余空间的份额。如果我们想将上图的3和6单元单个占满剩余空间，则可以将其栅栏轨道的宽度设置为1fr。

如果想三个栅栏轨道均匀占满。则可如下图设置。

grid-template-rows的属性值描述与grid-template-columns同理。不再赘述。
其中对fr的描述略有区别。
如果栅栏容器的高度已经定义则grid-template-rows中的fr与grid-template-columns的语义相同。
如果没有定义，可以看如下图。

此时容器的高度没有定义，则将容器压缩到最小，则1fr代表的是1盒子的高度，2盒子是2fr，高度是1盒子的两倍。

4、cloumn-gap,row-gap和gap属性

属性	说明
cloumn-gap	定义各列之间的间距
row-gap	定义各行之间的间距
gap	复合属性，是cloumn-gap和row-gap属性的简写

基本语法：

cloumn-gap: <length>;
row-gap: <length>;
gap: <row-gap> <cloumn-gap>;

实例：

5、grid-template-areas、grid-area

gird-template-areas用于为栅格容器划分“区域”。grid-area为栅格元素指定所属区域。
通常grid-template-areas与grid-template-cloumns和grid-template-rows搭配使用。
grid-template-areas的基本语法：一行一行的定义区域，每一行用英文引号“ ‘’ ”括起来。

如下代码，划分五个区域：

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'left top top'
                       'left middle right'
                       'bottom bottom right';
}

定义五个弹性元素

<div class="grid-container">
        <div class="left">left</div>
        <div class="bottom">bottom</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="middle">middle</div>
    </div>

这时我们再指定五个弹性元素的所属。

.left{grid-area: left;}
.bottom{grid-area: bottom;}
.right{grid-area: right;}
.top{grid-area: top;}
.middle{grid-area: middle;}

再定义一下间距和颜色，就会得到如下布局。

值得注意的时，我们可以不使用grid-template-cloumns和grid-template-rows,而直接用grid-template-areas,不过此时各个区域的基本单元大小时一样的。

三、关键词和函数

1、repeat函数

基本语法：repeat( n, content)
其中n代表重复次数， content代表重复内容。
例如：

.grid-box
{
	grid-template-cloumns:100px 100px 100px 100px;
	grid-template-rows:100px 200px 100px 200px 300px 300px;
}

等价于

.grid-box
{
	grid-template-columns:repeat(4, 100px);
	grid-template-rows:repeat(2, 100px 200px) repeat(2, 300px);
}

2、minmax函数

用于产生一个长度范围，如果用minmax设置宽度，则宽度只能在该范围变化。
基本语法：minmax（<最小值>， <最大值>）。

3、fr关键字

fr关键词是fraction的缩写，意为片段，用于表示比例关系。如果一个设置为1fr，另一个设置为3fr，则表示后者的长度是前者的两倍。设置fr关键字时，栅格单元会尽可能的填充整个空间。

4、auto关键字

表示由浏览自己决定长度

5、auto-fill关键字

当栅格单元的大小固定，而栅格容器的大小不确定，可以设置auto-fill关键词，让每一行尽可能容纳更多的栅格单元

如下：

.grid-box
{
	display:grid;
	grid-template-columns: repeat(auto-fill, 300px);
}

当浏览器比较大时

缩小窗口时

6、auto-fit关键字

auto-fit关键字和auto-fill关键字很像，都是在每一行尽可能的容纳元素。后者是填充空白列来达到目的的，auto-fit是调整宽度来达到目的的


他们在其他内容使用fr关键字的时候会略有差异。

7、min-content关键字和max-content关键字

关键字	含义
min-content	尽量少占用空间，可以显示内容即可
max-content	尽可能占据内容所需要的最大空间

可以看到，左盒子只需要最长单词的长度即可，右盒子需要占据整个句子的长度。

四、对齐方式

1.justify-content、justify-items和justify-self属性

属性	说明
justify-content	设置栅格单元的水平位置
justify-items	设置栅格单元的内容的水平位置
justify-self	为栅格单元单独设置水平位置

在具体解释之前，先看以下图片

对于justify-content，设置的是红色块相对蓝色块的位置
对于justify-items, 设置的是黄色块相对红色块的位置
justify-self与justify-content的含义相同，前者针对为栅格单元的属性，后者为栅格容器的的属性。

对于justify-content的取值，如下

属性值	说明
start	对齐栅格容器的起始边
end	对齐容器的终止边
center	居中
stretch	默认值,拉伸至占据整个栅格容器
space-around	栅格单元均匀排放，与边框有间隔，且是栅格单元的间隔的一半
space-between	栅格单元均匀排放， 与边框无间隔
space-evenly	栅格单元均匀排放，与 边框有间隔，且与栅格单元间的间隔相同

而对于justify-items

属性值	说明
start	对齐栅格单元的起始边缘
end	对齐栅格单元的起始边缘
center	对齐栅格单元的结束边缘。
stretch	默认值，拉伸至占满整个栅格单元

限于篇幅，剩余属性值不再赘述。

2.align-content、align-items和align-self属性

本小结属性与上一节属性相似，属性值也相同，唯一的区别就是本节属性值是垂直方向，由此不在赘述。

3.place-content、place-items和place-self属性

place-content、place-items和place-self属性都是复合属性。
其基本语法如下。

place-content: <align-content> <justify-content>
place-items: <align-items> <justify-items>
place-self: <align-self> <justify-slef>

五、栅格线

1、定义

在栅格容器中，我们通过栅格线来划分栅格单元。从而达到布局的目的，其中栅格线有系统默认的名字，纵向上 是1， 2， 3， 4……，横向上也是1， 2， 3， 4 ……。

2、命名

除了系统默认的名字外，我们可以自己给栅格线取额外的名字，其做法是在grid-template-colunms属性和grid-template-rows中的长度之间用”[]“包围自己想要的名字，多个名字用空格隔开。

基本语法

grid-template-colunms/grid-template-rows: [名字1 名字2] <长度> [名字3 名字4] <长度>；

设置如下代码

.grid-container:
{
	grid-template-columns:[first car] 1fr [two] 1fr [dog] 1fr [last key];
    grid-template-rows: [pop] 1fr [cup] 1fr [paper];
}

3、grid-column-start，grid-column-end，grid-row-start,grid-row-end属性

在我们了解了各个栅格线的名字后，就可以利用四个属性定位栅格元素的位置，以达到向放哪里就放哪里的目的。
grid-column-start用于定义定义栅格元素横向的起始栅格线，grid-column-end用于定义纵向的结束栅格线。
grid-row-start,grid-row-end分别用于定义纵向的起始栅格线和终止栅格线。

对于代码

.grid-container
{
	grid-template-columns:[first car] 1fr [two] 1fr [dog] 1fr [last key];
    grid-template-rows: [pop] 1fr [cup] 1fr [paper];
}

.one
        {
            grid-column-start: first;
            grid-column-end: dog;
            grid-row-start: 1;
            grid-row-end: cup;
        }
        .two
        {
            grid-column-start: dog;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: paper;
        }
        .three
        {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: cup;
            grid-row-end: paper;
        }

得到

值得注意的是：

1. 栅格元素之间可以相互重叠，可以修改其order属性(改变排列顺序)或者z-index属性（改变显示优先级）来改变重叠顺序。
2. 当省略栅格元素的终止位置时，默认以起始位置的下一条栅格线为终止位置 .

4、grid-column和grid-row属性

上述两个属性都是复合属性，分别是grid-column-start，grid-column-end属性和grid-row-start,grid-row-end的简写形式。
基本语法

grid-column: grid-column-start / grid-column-end;
grid-row:grid-row-start /grid-row-end

grid-column: 1 / 2;
等价于
grid-column-start:1;
grid-column-end:2;

5、gird-area属性是

grid-area是grid-row-start，grid-column-start属性和grid-row-end,grid-column-end的简写形式。属性之间用”/“分割。

grid-area: 1 / 2 / 3 / 4;
等价于
grid-row-start: 1;
grid-column-star:2;
grid-row-end: 3;
grid-column-end: 4;

六、栅格元素的排列规则

1、grid-auto-flow

grid-auto-flow属性用于定义栅格元素的排列规则

属性值	说明
row	默认值，按行优先的方式排列
column	按列优先的方式排列
row dense	按行优先的方式紧密排列
column dense	按列优先的方式紧密排列

在对五号栅格元素使用了如下代码后

.five
{
    grid-column: 1 / 3;
}

这时把栅格容器的grid-auto-flow改为row-dense

2、grid-auto-rows和grid-auto-columns

这两个元素用于定义超出栅格容器范围的栅格元素的尺寸，grid-auto-rows用于定义高，grid-auto-columns用于定义宽。

七.grid属性

grid属性是复合属性
由
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
组成，用的比较少，这里不详细讲解。

八、栅格布局的特性

• 栅格元素不会受到浮动的影响
• 栅格容器不是BFC，其中的栅格元素不会发生折叠的现象