Grid 网格布局

      网页排版布局从最早的table,float,再到flexbox,都有很多限制,table主要是用来做表格的,float主要是用来解决浮动的,flexbox是一维布局,针对的是某一个轴线(横轴或纵轴)上的排列。而Grid是一个二维的布局,它将容器划分成行和列,产生一个个格子,再将一个个格子根据设计组成区块,它远比flexbox强大的多,也让网页布局设计变得更加简单。网格可以分为两类。一类是我们主动去定义的,比如定义了一个两行三列的表格,那么这 6 个格子就叫显性网格。另一类是系统自动产生的,比如定义了一个两行三列的表格,可是总共有 9 个格子,那么后面 3 个就叫隐性网格。接下来我将从显性网格和隐性网格这两大类去简单记录下 CSS 网格布局

显性网格

建立网格

1.让指定的容器(container)采用网格布局,这样直属的所有元素都会变成该网格的单元(item)

1
display:grid;

如果需要设置为行内网格,则使用:

1
display:inline-grid;

2.为指定的容器(container)设置栏数(column)与行数(row)

1
2
3
4
/* 设置栏三等分,每一栏为1fr */
grid-template-columns: 1fr 1fr 1fr;
/* 设置第一行为50px,第二行为100px,第三行也为50px,除了使用绝对单位,也可以使用百分比 */
grid-template-rows: 50px 100px 50px;

repeat()

有时,写很多重复的数字会显得代码很冗余。当多次重复同样的大小时,可以使用repeat。它接受两个参数,第一个是重复的次数,第二个是大小。比如:

1
2
//相当于grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3,1fr);

minmax()

当我们的大小不是一个确定的值,而是一个范围的时候,就可以使用minmax.它接受两个参数,分别为最小值和最大值。

1
2
//表示中间列宽不小于auto(表示浏览器自己决定长度),不大于50%
grid-template-columns: 200px minmax(auto, 50%) 200px;

auto-fill

有的时候,我们确定了单元格的大小,但是不确定容器的大小。只是希望每一行或者每一列容纳尽可能多的单元格,这个时候我们就需要使用auto-fill去自动填充。比如:

1
grid-template-rows: repeat(auto-fill,50px);

auto-fit

auto-fitauto-fill类似,唯一的区别就是:当容器能容纳更多的单元时,auto-fill会增加空白栏,而auto-fit会将多余的宽度平均分给每一栏去撑满容器宽度。

1
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));

下图是auto-fit的展示效果,多余的空间被平均分配给了每一栏


auto-fit
1
grid-template-columns: repeat(auto-fill,minmax(100px,1fr));

下图是auto-fill的展示效果,自动产生了空白栏来填补多余的空间


auto-fill

设置间隔

设置行与行的间隔

1
grid-row-gap: 10px;

设置栏与栏的间隔

1
grid-column-gap: 10px;

合并写法:第一个是行,第二个是栏

1
grid-gap: 10px 20px;

网格线

网格线分为水平网格线和垂直网格线。水平网格线划分出行,垂直网格线划分出列。正常情况下,栏线总是比栏数多一,同样的,行线也比行数多一。
下图是一个 3*3 的网格,总共有 4 根栏线和 4 根行线。


网格线

网格线的命名

1
2
3
grid-template-columns:[c1] 100px [c2] 200px [c3] 300px [c4];
//同一条线可以有多个名字,用空格隔开
grid-template-rows:[r1 r1-front] 50px [r2 r1-back] 60px [r3]

这里需要注意的是:名称不能与 css 的保留字相同

定位以及合并单元格

定位

我们可以通过网格线将指定的单元格放到容器中指定的位置。比如,将 9 宫格的第一个单元放到最中间的单元格

1
2
3
4
5
6
/* 网格线中栏的起始位置从2到3*/
grid-column-start: 2;
grid-column-end: 3;
/* 网格线中行的起始位置从2到3*/
grid-row-start: 2;
grid-row-end: 3;

这样就成功将第一个单元放到了最中间单元格的位置上。其他单元则会顺移一个位置。合并写法:

1
2
grid-column: 2/3;
grid-row: 2/3;

合并单元格及堆叠问题

我们可以通过网格线进行单元格的合并

1
2
grid-column:1/3;
grid-row:1/3;

如果碰到两个单元格合并导致的堆叠问题,可以使用z-index解决。z-index默认为 0,数字越大,层级越高。

网格区域

网格布局可以通过grid-template-areas去指定区域。比如我们可以在页面上指定一个页首、内容部分(左右布局)和页尾这样一个常用布局。

1
2
3
4
grid-template-areas:
'header header'
'main aside'
'footer footer'

以上的代码先划分出了单元格,其中重复的部分,就是合并单元格。相当于划分出了headermainasidefooter四个区域。
这里需要注意的是:区域的命名会影响到网格线的名字。每个区域起始位置的栏线和行线都叫做区域名-start,终止区域的栏线和行线都叫做区域名-end
我们可以通过grid-area给指定元素占据grid-template-areas中指定区域的位置。比如:

1
2
3
#header{
grid-area: header;
}

相当于:

1
2
3
4
#header{
grid-column:header;
grid-row:header;
}

如果没有指定区域,可以使用grid-auto-flow属性,容器的子元素会按照顺序默认放置在每个网格中,默认是先行后列

1
grid-auto-flow:row;

  • column:先列后行

  • row dense:先行后列,尽量不出现空格

  • column dense:先列后行,尽量不出现空格

对齐设定

通过justify-itemsalign-items分别对网格中的单元格进行水平方向和垂直方向的对齐。
他们有以下几种常用值设定:

1
2
3
4
.container{
justify-items: start | end | center | stretch | space-around | space-between | space-evenly;
align-items: start | end | center | stretch | space-around | space-between | space-evenly;
}

或者可以简写为:

1
2
3
.container{
place-items: <align-items> <justify-items>;
}

  • start:在水平方向靠左,在垂直方向靠上

  • end:在水平方向靠右,在垂直方向靠下

  • center:居中

  • stretch:拉伸,占满单元格的整个宽度

  • space-around:将多余的空间放在单元格左右/上下两边

  • space-between:将多余的空间放在单元格中间

  • space-between:将多余的空间平均分给全部单元格

隐性网格

当一些不在我们预设范围内的网格,我们看看通过什么属性进行设置吧~

预设行高、栏宽以及排列方式

预设行高和栏宽

1
2
grid-auto-rows: 200px;
grid-auto-columns: 2fr;

预设单元格排列默认是:

1
grid-auto-flow:row;

在预设的情况下,单元格会默认先排满第一行,再排满第二行以此类推。我们可以改成以栏为主:

1
grid-auto-flow:column;

具体的兼容性可以查看这里,具体参考文章:文章 1文章 2文章 3文章 4文章 5文章 6

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :