CSS3 Grid——CSS3网格布局详解

网格元素

网格布局的基本构建块就是网格元素，该元素是通过将元素的 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) 关键字，表示宽度或高度介于 a 和 b 之间（只要可用空间允许）
• 分数单位 (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下面的效果(以下所有测试都在IE10下)


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

属性	描述
-ms-grid-column-align	指定网格列内部的网格项的水平对齐方式。可能的值包括 center、end、start 和 stretch。
-ms-grid-row-align	指定网格行内部的网格项的垂直对齐方式。可能的值包括 center、end、start 和 stretch。

按照下述方法修改 "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下面的效果(以下所有测试都在IE10下)


堆叠网格项

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

为了进行演示，我们如此更改 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 的上面。你可以查看此页面。


要替代这一默认行为，请使用 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;
}

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