CSS Grid 网格布局教程(3容器属性:grid-template-areas 属性)

君山

3.4 grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

1. .container {
   
2.   display: grid;
   
3.   grid-template-columns: 100px 100px 100px;
   
4.   grid-template-rows: 100px 100px 100px;
   
5.   grid-template-areas: 'a b c'
   
6.                                 'd e f'
   
7.                                 'g h i';
   
8. }

复制代码

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

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

1. 
   
2. grid-template-areas: 'a a a'
   
3.                               'b b b'
   
4.                               'c c c';
   

复制代码

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

下面是一个布局实例。

1. 
   
2. grid-template-areas: "header header header"
   
3.                               "main main sidebar"
   
4.                               "footer footer footer";
   

复制代码

上面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。

如果某些区域不需要利用，则使用"点"（.）表示。

1. 
   
2. grid-template-areas: 'a . c'
   
3.                               'd . f'
   
4.                               'g . i';
   

复制代码

上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。

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

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