Grid 容器属性篇（二） | 每天学一点Grid | 每天学一点Grid

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情

Grid 容器属性

本文我们先来看一下部分容器属性，row-gap、column-gap 与 gap 属性、grid-template-areas 属性。

1. row-gap、column-gap 与 gap 属性

row-gap 属性设置行与行的间隔（行间距），column-gap 属性设置列与列的间隔（列间距）。

例如：

.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    row-gap: 20px;
    column-gap: 20px;
}

效果：

gap 属性是 column-gap 和 row-gap 的合并简写形式，语法如下。

gap: <row-gap> <column-gap>;

所以上面的代码，我们就可以简写成一句。

row-gap: 20px;
column-gap: 20px;

/* 简写如下 */

gap: 20px 20px;

如果 gap 省略了第二个值，则浏览器认为第二个值等于第一个值。

2. grid-template-areas 属性

网格布局允许指定“区域”（area），一个区域由单个或多个单元格组成。

grid-template-areas 属性用于定义区域。

例如：

.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
    grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';
}

上面代码先划分出 9 个单元格，然后将其定名为 a 到 i 的九个区域，分别对应这九个单元格。

效果如下：

多个单元格合并成一个区域的写法如下。

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

上面代码将 9 个单元格分成 a、b、c 三个区域。

下面是一个布局实例。

.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
    grid-template-areas: "header header header"
                         "main . sidebar"
                         "footer footer footer"
}

上面代码示例会创建 3 行 3 列网格，第一行将是 header，第二行前第一个网格单元是 main 部分、中间的 . 表示空网格单元，第三个为 sidebar，第三行是 footer。

示意图如下：

具体效果如下：

因为我们的 html 中，容器下面只有 6 个项目，所以呈现出上图的样式效果。

但实际上 1、2、3 就是 header，4 为 main，5 为中间的空元素，6 为 sidebar。

注：区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为“区域名-start”，终止网格线自动命名为“区域名-end”。

比如，区域名为 header，则起始位置的水平网格线和垂直网格线叫做 header-start，终止位置的水平网格线和垂直网格线叫做 header-end。