网格布局

级联样式表级别 3 (CSS3) 网格布局(“网格”)是 Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用中新增的功能。与 Flexbox 相似,通过“网格”所获得的布局流畅性大于使用浮动或脚本进行定位所获得的布局流畅性。CSS3 网格对齐使你可以为网页或 Web 应用的主要区域划分空间,并在尺寸、位置和层范畴内定义各个 HTML 控件部件之间的关系。从而无需创建固定布局,固定布局无法利用浏览器窗口中的可用空间。

截止到编写本文档时,CSS3 网格布局仍处于开发阶段。当前的预发行版中实现的 CSS3 网格布局基于 CSS 网格布局模块(当前处于万维网联合会 (W3C) 工作草案阶段)。

由于网格功能使你能够将元素对齐到列和行中但它没有内容结构,因此通过它还可以实现无法由 HTML 表格实现的方案。通过将网格功能与媒体查询结合使用,可以使布局无缝地适应设备、方向、可用空间等因素的变化。

网格元素

网格布局的基本构建块就是网格元素,该元素是通过将元素的 display 属性设置为 -ms-grid(对于块级的网格元素)或 -ms-inline-grid(对于内联级的网格元素)进行声明的。(由于“网格布局”草案尚处于准备阶段,所以这一节中的属性必须在使用时带有特定于 Microsoft 供应商前缀“-ms-”,才能与 Internet Explorer 10 和适用于 Windows 8 的使用 JavaScript 的 Windows 应用商店应用配合使用。)例如,下面的代码示例在具有 "myGrid" ID 的元素内创建网格:


<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
}
</style>


轨道(列和行)

在创建网格元素之后,使用以下属性对列和行应用大小:

属性说明

-ms-grid-columns

指定网格内每个网格列的宽度。使用空格分隔每个列。

-ms-grid-rows

指定网格内每个网格行的高度。使用空格分隔每个行。

 

你可以使用以下任一项调整列和行(统称为“轨道”):

  • 标准长度单位或对象宽度(对于列)或高度(对于行)的百分比
  • auto 关键字,表示行宽或行高基于其中的项调整
  • min-content 关键字,表示将任何子元素的最小宽度或高度用作宽度或高度
  • max-content 关键字,表示将任何子元素的最大宽度或高度用作宽度或高度
  • minmax(a, b) 关键字,表示宽度或高度介于 ab 之间(只要可用空间允许)
  • 分数单位 (fr),表示可用空间应根据其分数值在列或行之间分配,如下例中所示
有关分数单位的示例,请考虑以下 "myGrid" ID 选择器的扩展版本:

<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
  -ms-grid-columns: auto 100px 1fr 2fr;
  -ms-grid-rows: 50px 5em auto;
}
</style>


此网格有四列,且每一列将按照下述方式显示:

  • 列 1(auto 关键字):列适合于列中的内容。
  • 列 2 ("100px"):列的宽度为 100 像素。
  • 列 3 ("1fr":列占据剩余空间的一个分数单位。
  • 列 4 ("2fr":列占据剩余空间的两个分数单位。

由于此网格中总共有三个分数单位,所以列 3 被分配了剩余空间的 1/3—即 3 个分数单位—中的 1 个分数单位。列 4 则被分配了剩余空间的 2/3。

同样,此网格有三行,且每一行将按照下述方式显示:

  • 行 1 ("50px"):行的高度为 50 像素。
  • 行 2 ("5em"):行的高度为 5 em。
  • 行 3(auto 关键字):行适合于行中的内容。

重复网格轨道

如果有大量的行或列都是相同的或者显示重复的样式,则可应用重复的语法以更紧凑的形式来指定列或行。下面的两个示例是等效的。有单个行和重复的列轨道样式:250px 宽的列,后面是 10px 宽的装订线。


<style type="text/css">
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px 250px 10px 250px 10px 250px 10px 250px 10px;
    -ms-grid-rows: 1fr;
  }	

  /* Equivalent definition. */
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px (250px 10px)[4];
    -ms-grid-rows: 1fr;
  }
</style>


网格项

网格的子元素称为网格项,并且使用以下属性进行定位:

属性说明

-ms-grid-column

指定在网格的哪一列放置网格项。

-ms-grid-row

指定在网格的哪一行放置网格项。

 

轨道编号系统是从 1 开始的索引,1 是默认值。假设已经声明过网格,请考虑以下两个 ID 选择器:


#item1 {
  background: maroon;
  border: orange solid 1px;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

现在,将这些选择器应用到以下标记:


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
</div>


你可以查看此页面。(Internet Explorer 10 对于正确显示此页面来说是必需的。)

网格项的示例

对齐网格项

你可以使用以下属性沿着由行和列所形成的单元格的任何边定位网格项。

属性说明

-ms-grid-column-align

指定网格列内部的网格项的水平对齐方式。可能的值包括 centerendstartstretch

-ms-grid-row-align

指定网格行内部的网格项的垂直对齐方式。可能的值包括 centerendstartstretch

 

按照下述方法修改 "item2" 选择器(添加最后四行):


#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  width: 40px;
  height: 30px;
  -ms-grid-column-align: end;
  -ms-grid-row-align: center;
}

此外,添加如下选择器:


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

现在,将这些选择器应用到以下标记:


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
  <div id="item3">Item 3</div>
</div>


你可以查看此页面。(Internet Explorer 10 对于正确显示此页面来说是必需的。)

网格对齐和定位的示例

堆叠网格项

你可以通过简单地在同一行或列中放置多个网格项来堆叠它们。。默认情况下,在标记中后来的项目将被绘制在先来的项目的上方。

为了进行演示,我们如此更改 Item 3 的选择器,以便它出现在 Item 2 所在的第 2 列和第 2 行:


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

由于 Item 3 的 div 比 Item 2 的 div 来得晚,所以 Item 3 将绘制在 Item 2 的上面。你可以查看此页面。(Internet Explorer 10 对于正确显示此页面来说是必需的。)

网格堆叠的示例

要替代这一默认行为,请使用 z-index 属性:

属性说明

z-index

指定网格单元格内网格项的层(z-index)。

 

尽管 z-index 属性正常情况下仅适用于未将 position 属性设置为 static 的对象,但 z-index 属性适用于网格项目,甚至在位置属性设置为 static 时也是如此。

在 Item 3 的选择器中,将 "-1" 值分配给 z-index 属性,以在堆叠顺序中将该项目向后推:


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  z-index: -1;
}

这使 Internet Explorer 10 在 Item 3 的上面绘制 Item 2。你可以查看此页面。(Internet Explorer 10 对于正确显示此页面来说是必需的。)

跨越网格项

你可以通过使用以下两个属性使网格项跨越多个行或列:

属性说明

-ms-grid-column-span

指定网格项跨越的网格列数。默认值为 "1"。

-ms-grid-row-span

指定网格项跨越的网格行数。默认值为 "1"。

 

在 Item 3 的选择器中,将 "4" 值分配给 -ms-grid-column-span 属性(并将 -ms-grid-column 属性的值更改为 "1"),从而使它跨越四列宽度(所有列):


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  z-index: -1;
  -ms-grid-column-span: 4;
}

你可以查看此页面。(Internet Explorer 10 对于正确显示此页面来说是必需的。)

注:如果你试图跨越超出网格中所指定的列或行数(例如,在前面的示例中,如果你将 -ms-grid-column 属性的值设置为 "2",并将 -ms-grid-column-span 属性设置为 "4",则已超出所指定的列数),另一列或行将被隐式创建,且超出指定数量的列或行的宽度或高度都被设置为 auto(适合于内容)。

API 参考

Grid Layout

示例和教程

CSS 网格重叠示例
如何使用 CSS 网格创建自适应布局
设计自适应网站

有关 Internet Explorer 的 Test Drive 演示

实例演示:CSS3 网格布局
网格系统
Gridddle

IEBlog 文章

IE10 Platform Preview 和 CSS 自适应布局特点

规范

CSS 网格布局

 

 

显示:
© 2015 Microsoft