1 前言
现在无论是做app还是做网站，宫格的布局也是必然存在的，那么如何使用css实现自适应的九宫格布局呢？下面简单来介绍一下css里面的grid实现九宫格布局。
2 相关属性和函数
2.1 fraction单位
CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。下面将每一列和行更改为一个 fraction 单位的值:
.grid { display: grid; //划容器为三个1fr的列 grid-template-columns: 1fr 1fr 1fr; //划容器为三个1fr的行 grid-template-rows: 1fr 1fr 1fr; } |
结果是栅格布局将会把整个宽度和高度各分成三个 fraction，每列和每行都会各占据一个 fraction 单位。
如果我们将grid-template-columns的值更改为1fr 2fr 1fr，第二列的宽度将会是其它两列的两倍。总宽现在是四个 fraction 单位，第二列占据两个 fraction 单位，其它列各占一个 fraction，此时这些子元素都会随着屏幕宽度的变化而跟着变化了。这样fraction 单位值更改列或行的值将会更加简单。
2.2 repeat函数
repeat()函数是一个强大的指定列和行的方法。让我们使用repeat()函数来更改网格:
grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); |
在上面代码中，repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度，这就和之前的布局完全一样。
然后是auto-fit。让我们跳过固定数量的列，将3替换为自适应数量：
grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px); |
现在，栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px，我们将永远没法获得所需的弹性，因为它们很难填充整个宽度。
为了解决上述问题，我们需要minmax()。我们将 100px 替换为 minmax(100px, 1fr)，代码如下：
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); |
minmax()函数定义的范围大于或等于 min， 小于或等于 max。
因此，现在每列将至少为 100px。但如果有更多的可用空间，栅格布局将简单地将其均分给每列，因为这些列变成了 fraction 单位，而不是 固定的100px。
2.3 gap属性
创建宫格布局时，每一个网格之间肯定会有间隙，可以使用grid-gap来控制其大小，代码如下：
grid-row-gap:2%; //控制行间隙
grid-column-gap:1%; //控制列间隙
grid-gap: 2%; //gap 属性是用来设置网格行与列之间的间隙（gutters），是grid-column-gap 和 grid-row-gap的简写 |
3 完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>九宫格布局grid实现</title> <style type="text/css"> .square { position: relative; width: 100%; padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */ } .square-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */ } .grid { display: grid; /*网格布局*/ grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 2%; grid-auto-flow: column; /*通过行或列的方式来依次填充*/ } .grid>div { color: #fff; font-size: 50px; text-align: center; background: lightblue; } </style> </head> <body> <div> <div class="square-inner grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </div> </body> </html> |
效果图：
