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 完整代码
效果图: