CSS Grid 布局:圣杯布局
这篇文章讲述使用 CSS Grid 实现圣杯布局。
背景
最近在研究 H5 页面的布局,便尝试使用 CSS Grid 来实现一个常见的页面布局:圣杯布局。
这篇文章不是 Grid 的使用说明,只讲解了构造圣杯布局中用到的部分属性,如果需要全面了解 Grid 的属性,可以阅读文末的参考文章。
CSS Grid 布局
网格布局(Grid)是最强大的 CSS 布局方案。
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的
CSS 框架达到的效果,现在浏览器内置了。
上图这样的布局,就是 Grid 布局的拿手好戏。
Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
基本概念
学习 Grid 布局之前,需要了解一些基本概念。
容器和项目
采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。
1 | <div> |
上面代码中,最外层的 <div>
元素就是容器,内层的三个 <div>
元素就是项目。
注意:项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的
<p>
元素就不是项目。Grid 布局只对项目生效。
行和列
容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。
上图中,水平的深色区域就是"行",垂直的深色区域就是"列"。
单元格
行和列的交叉区域,称为"单元格"(cell)。
正常情况下,n 行和m列会产生 n x m 个单元格。比如,3 行3 列会产生9个单元格。
网格线
划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。
正常情况下,n 行有 n + 1 根水平网格线,m 列有 m + 1
根垂直网格线,比如三行就有四根水平网格线。
上图是一个 4 x 4 的网格,共有5根水平网格线和5根垂直网格线。
圣杯布局
圣杯布局(Holy Grail
Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
代码实现
全量代码如下,包括 Html 及 css 脚本。
1 | <!DOCTYPE html> |
页面架构
使用 Grid 布局,各项目是扁平的结构,然后通过 grid-column 属性划分到不同的单元格上。
css 代码
- display: grid,声明为 grid 布局;
- height: 100vh,声明容器的高度,vh 是相对于视图高度的计量单位,1vh 是视图窗口高度的 1%,100vh 表示等于视图窗口高度;
- rid-template: auto 1fr auto / auto 1fr auto,声明行和列的数量及大小,后文详细介绍;
- padding: 2rem,指定内边距,它是一个相对于 html 元素的计量单位,n rem 表示 n 倍根元素大小;
- grid-column: 1 / 4, grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式,它用来表示占据多少列。
Grid 属性
display 属性
display: grid指定一个容器采用网格布局。
1 | div { |
默认情况下,容器元素都是块级元素,但也可以设成行内元素。
1 | div { |
上面代码指定 div 是一个行内元素,该元素内部采用网格布局。
grid-template-columns & grid-template-rows 属性
容器指定了网格布局以后,接着就要划分行和列。grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。
1 | .container { |
上面代码指定了一个三行三列的网格,列宽和行高都是100px。
除了使用绝对单位,也可以使用百分比。
1 | .container { |
fr 关键字
为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为 1fr 和 2fr,就表示后者是前者的两倍。
1 | .container { |
上面代码表示两个相同宽度的列。
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 | .item-1 { |
上面代码指定,1号项目的左边框是第二根垂直网格线,右边框是第四根垂直网格线。
上图中,合并了第一行的两个单元格,row 的合并也类似。
grid-column & grid-row 属性
grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式,grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式。
1 | .item { |
下面是一个例子。 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 | .item-1 { |
上面代码中,项目item-1占据的区域,包括第一行 + 第二行、第一列 +
第二列。
斜杠以及后面的部分可以省略,默认跨越一个网格。
1 | .item-1 { |
上面代码中,项目item-1占据左上角第一个网格。
参考: