CSS Grid 布局：圣杯布局

发表于 分类于 阅读次数：

这篇文章讲述使用 CSS Grid 实现圣杯布局。

背景

最近在研究 H5 页面的布局，便尝试使用 CSS Grid 来实现一个常见的页面布局：圣杯布局。

这篇文章不是 Grid 的使用说明，只讲解了构造圣杯布局中用到的部分属性，如果需要全面了解 Grid 的属性，可以阅读文末的参考文章。

CSS Grid 布局

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 grid layout

上图这样的布局，就是 Grid 布局的拿手好戏。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

基本概念

学习 Grid 布局之前，需要了解一些基本概念。

容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

1
2
3
4
5
<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面代码中，最外层的 <div> 元素就是容器，内层的三个 <div> 元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的 <p> 元素就不是项目。Grid 布局只对项目生效。

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。 grid 行和列

上图中，水平的深色区域就是"行"，垂直的深色区域就是"列"。

单元格

行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n 行和m列会产生 n x m 个单元格。比如，3 行3 列会产生9个单元格。

网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n 行有 n + 1 根水平网格线，m 列有 m + 1 根垂直网格线，比如三行就有四根水平网格线。 grid 网格线

上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。 Holy Grail Layout

代码实现

全量代码如下，包括 Html 及 css 脚本。

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	    <title>Holy Grail Grid</title>
        <style type="text/css">
            body {
                display: grid;
                height: 100vh;
                grid-template: auto 1fr auto / auto 1fr auto
            }

            header {
                background: lightpink;
                padding: 2rem;
                grid-column: 1 / 4;
            }

            .left-sidebar {
                background: lightblue;
                grid-column: 1 / 2;
            }

            main {
                background: coral;
                grid-column: 2 / 3;
            }

            .right-sidebar {
                background: yellow;
                grid-column: 3 / 4;
            }

            footer {
                background: wheat;
                padding: 2rem;
                text-align: center;
                grid-column: 1 / 4;
            }

            body {
                font-family: system-ui, sans-serif;
            }

            .left-sidebar,
            .right-sidebar {
                padding: 1rem;
            }
        </style>
    </head>
    <body>
        <header><h1 contenteditable>Header.com</h1></header>
        <div class="left-sidebar" contenteditable>Left Sidebar</div>
        <main contenteditable></main>
        <div class="right-sidebar" contenteditable>Right Sidebar</div>
        <footer contenteditable>Footer Content — Header.com 2020</footer>
    </body>
</html>

页面架构

使用 Grid 布局，各项目是扁平的结构，然后通过 grid-column 属性划分到不同的单元格上。

css 代码

  1. display: grid，声明为 grid 布局；
  2. height: 100vh，声明容器的高度，vh 是相对于视图高度的计量单位，1vh 是视图窗口高度的 1%，100vh 表示等于视图窗口高度；
  3. rid-template: auto 1fr auto / auto 1fr auto，声明行和列的数量及大小，后文详细介绍；
  4. padding: 2rem，指定内边距，它是一个相对于 html 元素的计量单位，n rem 表示 n 倍根元素大小；
  5. grid-column: 1 / 4, grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式，它用来表示占据多少列。

Grid 属性

display 属性

display: grid指定一个容器采用网格布局。

1
2
3
div {
  display: grid;
}

默认情况下，容器元素都是块级元素，但也可以设成行内元素。

1
2
3
div {
  display: inline-grid;
}

上面代码指定 div 是一个行内元素，该元素内部采用网格布局。

grid-template-columns & grid-template-rows 属性

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

上面代码指定了一个三行三列的网格，列宽和行高都是100px。

除了使用绝对单位，也可以使用百分比。

1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为 1fr 和 2fr，就表示后者是前者的两倍。

1
2
3
4
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

上面代码表示两个相同宽度的列。

auto 关键字

auto关键字表示由浏览器自己决定长度。 

1
grid-template-columns: 100px auto 100px;

上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了 min-width，且这个值大于最大宽度。

grid-column-start 属性 & grid-column-end 属性 & grid-row-start 属性 & grid-row-end 属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线，使用这四个属性，可以做到类似合并单元格的效果。

  • grid-column-start属性：左边框所在的垂直网格线；
  • grid-column-end属性：右边框所在的垂直网格线；
  • grid-row-start属性：上边框所在的水平网格线；
  • grid-row-end属性：下边框所在的水平网格线；
1
2
3
4
.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

上面代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。 grid column

上图中，合并了第一行的两个单元格，row 的合并也类似。

grid-column & grid-row 属性

grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式，grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式。

1
2
3
4
.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

下面是一个例子。 

1
2
3
4
5
6
7
8
9
10
11
.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

上面代码中，项目 item-1 占据第一和第二行，从第一根列线到第三根列线。

这两个属性之中，也可以使用span关键字，表示跨越多少个网格。

1
2
3
4
5
6
7
8
9
.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

上面代码中，项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。 grid column row

斜杠以及后面的部分可以省略，默认跨越一个网格。

1
2
3
4
.item-1 {
  grid-column: 1;
  grid-row: 1;
}

上面代码中，项目item-1占据左上角第一个网格。


参考：

1. CSS Grid 网格布局教程

2. 只要一行代码，实现五种 CSS 经典布局