1 前言

现在无论是做app还是做网站，宫格的布局也是必然存在的，那么如何使用css实现自适应的九宫格布局呢？下面简单来介绍一下css里面的grid实现九宫格布局。

2 相关属性和函数

2.1 fraction单位

CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。下面将每一列和行更改为一个 fraction 单位的值:

结果是栅格布局将会把整个宽度和高度各分成三个 fraction，每列和每行都会各占据一个 fraction 单位。

如果我们将grid-template-columns的值更改为1fr 2fr 1fr，第二列的宽度将会是其它两列的两倍。总宽现在是四个 fraction 单位，第二列占据两个 fraction 单位，其它列各占一个 fraction，此时这些子元素都会随着屏幕宽度的变化而跟着变化了。这样fraction 单位值更改列或行的值将会更加简单。

2.2 repeat函数

repeat()函数是一个强大的指定列和行的方法。让我们使用repeat()函数来更改网格:

在上面代码中，repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度，这就和之前的布局完全一样。

然后是auto-fit。让我们跳过固定数量的列，将3替换为自适应数量：

现在，栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px，我们将永远没法获得所需的弹性，因为它们很难填充整个宽度。

为了解决上述问题，我们需要minmax()。我们将 100px 替换为 minmax(100px, 1fr)，代码如下：

minmax()函数定义的范围大于或等于 min， 小于或等于 max。

因此，现在每列将至少为 100px。但如果有更多的可用空间，栅格布局将简单地将其均分给每列，因为这些列变成了 fraction 单位，而不是 固定的100px。

2.3 gap属性

创建宫格布局时，每一个网格之间肯定会有间隙，可以使用grid-gap来控制其大小，代码如下：

3 完整代码

效果图：