一、概述

如果说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,其中的栅格元素不会发生折叠的现象
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐