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 ContentHeader.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 经典布局