CSS3 网格布局(grid-layout)基础知识 - 网格模板属性(grid-template)使用说明

CSS3引入了新的网格布局（grid layout）。以适应显示和设计技术的发展（尤其是移动设备优先的响应式设计）。

主要目标是建立一个稳定可预料且语义正确的网页布局模式，用来替代过往表现不稳定且繁琐的table、flow以及JS脚本混合技术来实现的网页动态布局。

本文将简单而准确的介绍网格布局属性的基本概念和用法（摘自踏得网在线HTML5教程）。

1. 概述

网格模板区域（grid-template-areas）、网格模板行（grid-template-rows）和网格模板列（grid-template-columns），这3个属性共同显式定义了一个网格容器。

而网格模板（grid-template）属性是一个用来同一时候设置这3个属性的速写（shorthand）。 grid items内容可能会超出显式网格，这时网格容器会自己主动生成隐式轨道（implicit track），这些隐式轨道的尺寸由 grid-auto-rows 和 grid-auto-columns 属性所确定。

显式网格的大小是由网格模板区域定义的行/列数以及在网格模板行/网格模板列属性定义了尺寸的行/列数中的较大者决定的。 

不论什么由网格模板区域定义的行或列但没有在网格模板行/网格模板列中定义尺寸，则由grid-auto-rows或grid-auto-columns属性来确定大小。

假设未定义显式轨道，显式网格依旧在每根轴线上包括一个网格线。

网格定位（grid-placement）属性中的数字索引从显式网格的边缘開始计算。假设从起始側開始。索引为以1開始的正数。反之从结束側開始，则为以-1開始的负数。

2. 轨道尺寸：grid-template-rows 和 grid-template-columns

这两个属性用来定义一组空格分开的轨道列表（track list），轨道列表本身使用网格线名称和轨道尺寸函数来定义。

 

轨道尺寸函数能够是详细的长度、相对于网格容器的百分比、按实际填充内容计算（如min-content）或者可用空间片段。

它还能够通过minmax(min,max)函数来指定一个长度范围。也就是介于min和max之间的一个尺寸。当中min/max參数相同能够使用前面提到的这些尺寸定义方式。

grid-template-columns属性指定网格列的轨道列表。而grid-template-rows属性指定网格行的轨道列表。

3. 命名区域：grid-template-areas属性

此属性指定命名网格区域，该区域与不论什么特定的网格项无关，但可在网格定位（grid-placement）属性中引用。

网格模板区域（grid-template-areas）属性也提供了一个可视化的网格结构。使网格容器的总体布局更easy被理解。

<string>+ 代表一系列字符串。

网格模板区域属性中每一个单独的字符串（string）定义了一个行。而字符串中的每一个单元（cell）定义了一个列。

浏览器使用最长匹配语义来把字符串解析为例如以下标记（token）列表：

1. 一串名称编码点（name code points），代表一个命名单元标记（named cell token），其名称由code points（即Unicode编码空间中的字符）组成。
2. 一串单个或多个"."。代表一个空单元标记（null cell token）。
3. 一串空格（whitespace），代表不会生成不论什么标记。

4. 其他字符串，代表一个垃圾标记（trash token）。

4. 应用实例

上述描写叙述严格但有点死板。我们还是用一个经典的响应式多列多行页面布局实例来进行说明：

[ CSS代码 ]

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "foot ....";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

[ HTML代码 ]

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>

上述代码通过 grid-template-areas 定义了一个3行2列的弹性布局：

1. 相邻的2个head字符串，将生成一个名为head的网格区域。跨越2列。

2. nav、main和foot字符串分别生成与其同名的3个网格区域。

3. 4个点（....）连线生成一个空网格区域。

然后通过grid-template-rows定义了各行轨道高度。

第1、3行分别为50px和30px固定高度，第二行为弹性尺寸就可以用空间减去固定尺寸后根据弹性因子按比例分配的长度，

在这里仅仅有一个弹性尺寸，且弹性因子为1，表示占用全部剩余空间宽度（也就是：网格容器宽度 - 50px - 30px）。

通过grid-template-columns定义了各列轨道宽度。第1列为150px固定宽度。第2列占领水平方向的剩余空间。

你能够通过在线实例来自己測试下：http://wow.techbrood.com/fiddle/15975

【注意：网格布局相关规范仍处于Working Draft状态，所以请在浏览器中进行实际測试以鉴别其兼容性。】

by iefreer