网格布局的简单应用（display: grid;）

ゝ一世哀愁。 2023-07-10 08:48 110阅读 0赞

我们在做布局的时候经常会发现有些地方的宽高排列都非常规则，而且有多行内容，这时使用网格（grid）布局就非常的方便快捷了。那么接下来我们做个简单的九宫格来看看该如何使用该布局：

## 实例 ##

很明显九宫格就是九个小方块，那么我们可以用一个大盒子去套九个小盒子：

因为div是块元素，会独占一行，所以要想让他们显示在网格中，首先将需要做成网格的盒子转换成块级网络元素：`display: grid;`，然后给它分成三行三列：

#main{ 
    	  width: 180px;
    	  height: 180px;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 1fr 1fr 1fr;
          grid-template-areas: 
          "a1 a2 a3"
          "a4 a5 a6"
          "a7 a8 a9";
    }

这里`grid-template-columns`表示网格的列数，`grid-template-rows`表示网格的行数，fr 在这里是个比例单位，表示各列（行）之间宽度（高度）的比为1：1：1，数值之间用空格隔开。如果行数或者列数较多，我们可以简写，在这里我们这样写与上面同属性等价：

grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);

用`repeat(x,y)`时，其中x表示行数（列数），y表示比例.  
`grid-template-areas`用来划分区域，给各个网格编号以便将子元素放入规定的网格中

##### 注意：区域必须是矩形。 #####

让我们来看看效果：  
![在这里插入图片描述][20200301183632707.png]  
当然，上面的行、列和区域也有总体的简写属性`grid-template`，就比如上面的案例，可以写成：

grid-template:
         "a1 a2 a3" 1fr
         "a4 a5 a6" 1fr
         "a7 a8 a9" 1fr
         /1fr 1fr 1fr；

但是因为这种比较麻烦，反而不如分开写来的简洁明了，所以不详细介绍。

默认情况下，子元素会按顺序分布在网格中，我们给子元素加个背景色：

/* 逆战班 */
    .box1{ 
        background-color: red;
    }
    .box2{ 
        background-color: orange;
    }
    .box3{ 
        background-color: yellow;
    }
    .box4{ 
        background-color: green;
    }
    .box5{ 
        background-color: cyan;
    }
    .box6{ 
        background-color: blue;
    }
    .box7{ 
        background-color: purple;
    }
    .box8{ 
        background-color: hotpink;
    }
    .box9{ 
        background-color: black;
    }

然后看看效果：  
![在这里插入图片描述][20200301194613507.png]  
可以看到子元素从左到右依次排到了各个格子中，但是如果我们不想让子元素按顺序分布的时候，此时可以给子元素使用`grid-area`属性，`grid-area`属性表示给子元素设置指定区域：

/* 逆战班 */
    .box1{ 
        grid-area: a9;
        background-color: red;
    }
    .box2{ 
        grid-area: a8;
        background-color: orange;
    }
    .box3{ 
        grid-area: a7;
        background-color: yellow;
    }
    .box4{ 
        grid-area: a6;
        background-color: green;
    }
    .box5{ 
        grid-area: a5;
        background-color: cyan;
    }
    .box6{ 
        grid-area: a4;
        background-color: blue;
    }
    .box7{ 
        grid-area: a3;
        background-color: purple;
    }
    .box8{ 
        grid-area: a2;
        background-color: hotpink;
    }
    .box9{ 
        grid-area: a1;
        background-color: black;
    }

我们再看一下效果：  
![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200301184307146.png][https_img-blog.csdnimg.cn_20200301184307146.png]  
很明显，子元素按照我们的意思倒着排列了。  
如果我们想给每列格子之间加点空隙，可以给父元素使用`grid-column-gap`属性，比如给案例加10像素的列间隙：

#main{ 
        grid-column-gap: 10px;
    }

效果：  
![在这里插入图片描述][20200301194942492.png]  
同理，如果想给每行格子之间加空隙，仍然是给父元素使用`grid-row-gap`属性：

#main{ 
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

效果：  
![在这里插入图片描述][2020030119513077.png]  
当然，这里也有复合写法`grid-gap`，语法：

grid-gap: grid-row-gap | grid-column-gap;

中间以空格隔开。

这里我们发现，因为产生间隙，所以每个格子的宽高都自动压缩了，这是因为我们一开始固定了父容器的宽高，所以发生了这种情况，我们可以在实际情况中决定要不要固定父容器的宽高。

[20200301183632707.png]: https://img-blog.csdnimg.cn/20200301183632707.png
[20200301194613507.png]: https://img-blog.csdnimg.cn/20200301194613507.png
[https_img-blog.csdnimg.cn_20200301184307146.png]: https://img-blog.csdnimg.cn/20200301194543835.png
[20200301194942492.png]: https://img-blog.csdnimg.cn/20200301194942492.png
[2020030119513077.png]: https://img-blog.csdnimg.cn/2020030119513077.png