CSS3 网格布局(grid-layout)基础知识

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）属性也提供了一个可视化的网格结构，使网格容器的整体布局更容易被理解。

+ 代表一系列字符串。

网格模板区域属性中每个单独的字符串（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