Grid 网格布局

CSS 阅读量

      网页排版布局从最早的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-fit和auto-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'

以上的代码先划分出了单元格，其中重复的部分，就是合并单元格。相当于划分出了header、main、aside、footer四个区域。
这里需要注意的是：区域的命名会影响到网格线的名字。每个区域起始位置的栏线和行线都叫做区域名-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-items和align-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.

访客数 : | 访问量 :