我们在做布局的时候经常会发现有些地方的宽高排列都非常规则,而且有多行内容,这时使用网格(grid)布局就非常的方便快捷了。那么接下来我们做个简单的九宫格来看看该如何使用该布局:
实例
很明显九宫格就是九个小方块,那么我们可以用一个大盒子去套九个小盒子:
<div id="main">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
因为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
用来划分区域,给各个网格编号以便将子元素放入规定的网格中
注意:区域必须是矩形。
让我们来看看效果:
当然,上面的行、列和区域也有总体的简写属性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;
}
然后看看效果:
可以看到子元素从左到右依次排到了各个格子中,但是如果我们不想让子元素按顺序分布的时候,此时可以给子元素使用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;
}
我们再看一下效果:
很明显,子元素按照我们的意思倒着排列了。
如果我们想给每列格子之间加点空隙,可以给父元素使用grid-column-gap
属性,比如给案例加10像素的列间隙:
#main{
grid-column-gap: 10px;
}
效果:
同理,如果想给每行格子之间加空隙,仍然是给父元素使用grid-row-gap
属性:
#main{
grid-column-gap: 10px;
grid-row-gap: 10px;
}
效果:
当然,这里也有复合写法grid-gap
,语法:
grid-gap: grid-row-gap | grid-column-gap;
中间以空格隔开。
这里我们发现,因为产生间隙,所以每个格子的宽高都自动压缩了,这是因为我们一开始固定了父容器的宽高,所以发生了这种情况,我们可以在实际情况中决定要不要固定父容器的宽高。