前端|Grid实现自适应九宫格布局

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>

效果图:

前端|Grid实现自适应九宫格布局

END

主  编   |   张祯悦

责  编   |   冯    博

 where2go 团队


        

前端|Grid实现自适应九宫格布局

上一篇:CSS背景


下一篇:css做动画