Grid 布局

CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

网格布局样例

1
2
3
4
5
6
7
8
<div class="wrapper">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
    <div class="four">Four</div>
    <div class="five">Five</div>
    <div class="six">Six</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}
.one {
    grid-column: 1 / 3;
    grid-row: 1;
}
.two {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
}
.three {
    grid-row: 2 / 5;
    grid-column: 1;
}
.four {
    grid-column: 3;
    grid-row: 3;
}
.five {
    grid-column: 2;
    grid-row: 4;
}
.six {
    grid-column: 3;
    grid-row: 4;
}

One
Two
Three
Four
Five
Six

网格容器&网格元素

我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格元素。

网格轨道

我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。这些属性定义了网格的轨道。

网格还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。新的 fr 单位代表网格容器中可用空间的一等份。

有着多轨道的大型网格可使用 repeat() 标记来重复部分或整个轨道列表。

你也可以在隐式网格中用 grid-auto-rows 和 grid-auto-columns 属性来定义一个设置大小尺寸的轨道。

在设置一个显式的网格或者定义自动创建的行和列的大小的时候，可以通过 minmax() 函数来给网格轨道一个最小/最大尺寸

网格线

当我们定义网格时，我们定义的是网格轨道，而不是网格线。网格轨道两边的线即是网格线。一个三列两行的网格中有三条横向的网格线，四条纵向的网格线。当放置元素时，我们使用网格线定位。

网格元素中的 grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性分别代表了网格线的横向开始、横向结束、纵向开始和纵向结束。

网格单元

一个网格单元是在一个网格元素中最小的单位。

网格区域

网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形。

网格间距

在两个网格单元之间的 网格横向间距 或 网格纵向间距 可使用 grid-column-gap 和 grid-row-gap 属性来创建，或者直接使用两个合并的缩写形式 grid-gap。

嵌套网格

一个网格元素可以也成为一个网格容器。如果元素不是网格容器的直接子级元素，它们不会参与到网格布局中，并显示为正常的文档流。

使用 z-index 控制层级

多个网格项目可以占用同一个网格单位。默认覆盖顺序遵循文档流的原始顺序（后来居上）。可以使用 z-index 属性控制层级。