css解析——网格布局（Grid）

大家好，欢迎来到IT知识分享网。

什么是网格布局？

先看一个例子：

网格布局

简单来说网格布局就是display: grid，将元素定义为一个网格容器，内部的子元素则变成网格元素。

display: grid; // 定义网格容器 grid-template-columns: 1fr 1fr 1fr; // 定义等宽的3列 grid-template-rows: 1fr 1fr; // 定义等高的两行 grid-gap: .5em; // 给每个网格的单元格子间加上间隔

fr是一种新的单位，代表每一行或者列的分数单位（fraction unit）。

重要概念

网格线（grid line）：网格线构成了网格的框架。一条网格线可以水平或垂直，也可以位于一行或一列的任意一侧。如果指定了grid-gap，它就位于网格线上。

网格轨道（grid track）：一个网格轨道是两条相邻网格线之间的空间。网格有水平轨道和垂直轨道。

网格单元（grid cell）：网格上的单个空间，水平和垂直的网格轨道交叉重叠的部分。

网格区域（grid area）：网格的矩形区域，由一个到多个网格单元组成。

网格线编号

网格轨道定义好后，要将每个网格元素放到特定的位置上。浏览器给网格里的每个网格线都赋予了编号。

网格线编号

可以在grid-column和grid-row属性中间用网格线的编号指定网格元素的位置。如果想要一个网格元素在垂直方向上跨越1号网格线到3号网格线，就需要给元素设置grid-column：1 / 3。

需要注意的是，网格的高度是随着内容的高度自动计算的，比如上面a、c两个网格分别占据了两行，一共有5行，最终每行的高度是a、c内容高度的最大值除以所占的行数（2），如果我们设置a只占一行，那么每一行的高度就会放大接近2倍：

命名网格线

有时候记录所有网格线的编号实在太麻烦了，为了能简单点，可以给网格线命名：

grid-template-column: [start] 2fr [center] 1fr [end];

这条声明定义了两列的网格，三条垂直的网格线分别叫做start、center、end。之后在grid-colum中可以这样写：

grid-column: start / center;

命名网格区域

可以将网格区域命名，然后将元素放到指定的网格中：

命名网格区域

需要注意的是，网格的命名一定要准确，并且不能少，不然网格就会错位！