资源描述
不言而喻，Web 开发人员在布局网页时有许多选择。在确定使用哪个方法时，应确保你的布局可适应不同的设备、方向和屏幕尺寸，这是一个重要考虑事项。网格布局是一种新的布局方法，该方法使你能够基于固定数量、浏览器窗口中的可用空间或二者组合划分网页主要区域的空间。
由于网格布局使你能够将元素按列和行对齐，但没有内容结构，因此它还支持 HTML 或级联样式表 (CSS) 表格无法实现的方案——如本文中介绍的方案。此外，通过将网格布局与媒体查询结合使用，可以使布局无缝地适应设备外形尺寸、方向、可用空间等因素的变化。
CSS 网格布局规范当前是一个万维网联合会 (W3C) 工作草案，并在 Internet Explorer 10 中以供应商前缀的形式得到部分支持。有关支持的属性的完整列表，请参见 MSDN 上的网格布局。因为网格布局规范仍处于开发阶段，所以 Internet Explorer 10 中的支持可能与规范中设计的支持不完全对应。
这里我们将指导你创建一个简单的“光框”页面，用于查看图片库中的图片。我们使用网格布局组织页面的内容，并使用媒体查询优化该布局，以便按纵向或横向方式进行查看。 在纵向布局中，浏览器窗口的高度大于其宽度；在横向布局中，浏览器窗口的宽度大于其高度。
本主题包括以下部分：
· 设计页面
· 构建网格
· 构建页面
· 创建网格元素并指定行和列
· 关于分数单位
· 将页面元素分配给列和行
· 对齐网格项
· 将网格与媒体查询一起使用
· 使用网格创建元素叠加
· 总结
· 相关主题
设计页面
我们希望此光框页面在采用新 Windows UI 环境的 Internet Explorer 中占用整个屏幕，并且无任何滚动。当然，此页面应在桌面版 Internet Explorer 中同样可用，而且能够很好地适应该浏览器的镶边。
以下草图大致说明了光框页面在横向布局中的外观。我们已选择创建此草图，并假设浏览器占用纵横比为 16:9 的整个宽屏显示。
在此图中，A 是徽标专用的小区域，B 是图片标题或说明区，C 是主图片查看区，D 是库中其他图片的缩略图区。
因为光框页面专用于全屏查看，所以我们必须考虑不同的屏幕尺寸。页面的焦点是大图片。因此，当屏幕尺寸增加时，应让图片面板 (C) 扩展。但是，我们还应防止面板 A 扩展、防止面板 B 水平扩展，并防止面板 D 垂直扩展。
构建网格
此方案非常适用于网格布局。为帮助构建网格，我们将添加虚线来完成已经不可视的网格线。为保持页面元素之间有一定的间距，并防止设计看起来过于拥挤，我们将添加一些空白区。空白区可以是具有固定宽度或高度的额外列和行。
在此图片中，紫色虚线表示网格元素或网格布局容器。红色虚线表示网格线。
此网格总共有五行和三列：
· 空白区是第二和第四行以及第二列。
· 第一和最后一行是固定高度，考虑了面板 A 和 D 的固定高度
· 第三行的高度可变，这样该布局可扩展到任何屏幕
· 第一列是固定宽度，考虑了面板 A 和 B 的固定宽度
· 最后一列的宽度可变，这样该布局可扩展到任何屏幕
构建页面
现在我们开始构建网格。首先，我们编写一个简单的 HTML 来获得基本的页面结构。请注意，不必设置各部分的顺序，你期望的是获得一个草案，而这正是网格的优点之一：你可以按所需的方式在文档对象模型 (DOM) 顺序中对元素重新排序。
HTML
复制
<!DOCTYPE html>
<html>
<head>
<meta content="IE=10" http-equiv="X-UA-Compatible" />
<link href="photogallerystyles.css" media="screen" rel="stylesheet" type="text/css">
<style>
</style>
</head>
<body>
<div id="body">
<div id="grid">
<div id="text_box" class="orange">
Text box</div>
<div id="big_pic" class="red">
<img id="mainphoto" alt="mainphoto" src="images/img1.jpg"></div>
<div id="photos" class="blue">
Photos</div>
<div id="logo" class="green">
<div id="logotype">
CONTOSO<br>IMAGES</div>
<div id="pagedesc">
Lightbox</div>
</div>
</div>
</div>
</body>
</html>
创建网格元素并指定行和列
现在，创建网格元素并指定行和列。
首先添加 display 元素，并将其设置为 -ms-grid。此操作将创建网格元素。
在网格元素中，我们使用 -ms-grid-columns 属性在空格分隔的列表中指定每个列的宽度。同样，我们使用 -ms-grid-rows 属性在空格分隔的列表中指定每个行的高度。
对于 ID 为 "grid" 的元素，我们的 CSS 如下所示：
CSS
复制
#grid {
height: calc(100vh - 65px); /* 65px to account for scrollbar */;
display: -ms-grid;
-ms-grid-columns: 200px 25px 1fr;
-ms-grid-rows: 160px 25px 1fr 25px 200px;
border: 1px solid red; /* for a visual guide */
}
关于分数单位
要让网格能够根据可用的空间调整自身的大小，我们使用“分数单位”(fr)。分数单位的大小取决于总可用空间和指定的分数单位总数。在光框示例页面中，我们仅使用一个分数单位，但在更复杂的布局中也可以使用一个分数单位。例如，请考虑以下情况：指定的四个列长分别是自动、100 像素、1 个分数单位和 2 个分数单位。各列将显示为：
· 列 1（auto 关键字）：列适合于列中的内容。
· 列 2 ("100px")：列的宽度为 100 像素。
· 列 3 ("1fr"）：列占据剩余空间的一个分数单位。
· 列 4 ("2fr"）：列占据剩余空间的两个分数单位。
由于此网格中总共有三个分数单位，所以列 3 被分配了剩余空间的 1/3——即 3 个分数单位中的 1 个分数单位。列 4 则被分配了剩余空间的 2/3。
将页面元素分配给列和行
如果你现在查看页面，页面显然还不完善。所有不同的页面元素相互叠加，因为我们还没有定义放置每个元素的列。通过使用 -ms-grid-row、-ms-grid-column、-ms-grid-row-span 和 -ms-grid-column-span 属性的组合可以做到这一点。
-ms-grid-row 和 -ms-grid-column 属性在应用到页面元素时，可以指定页面元素开始的网格单元。在从左到右、从上至下的语言中，-ms-grid-row 属性指定元素将占用的最上一行。同样，可以使用 -ms-grid-column 属性指定元素将占用的最左一列。
-ms-grid-row-span 和 -ms-grid-column-span 属性应用到页面元素时，可以指定页面元素将跨多少行和列。
请注意，如果试图跨越超出网格中所指定的列或行数，将隐式创建其他列或行，并将超出指定数量的每个列或行的宽度或高度都设置为 auto（适合于内容）。
CSS
复制
#text_box {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-row-span: 3;
padding: 15px;
}
#big_pic {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-row-span: 3;
padding: 15px;
}
#photos {
-ms-grid-row: 5;
-ms-grid-column: 3;
padding: 15px;
}
#logo {
-ms-grid-row: 1;
-ms-grid-column: 1;
text-align: center;
padding: 20px;
}
在添加这些选择器以及其他页面元素的样式设置之后查看页面。
对齐网格项
页面外观看上去不错，但最好让图片在其面板中居中。为完成此任务，我们将使用 -ms-grid-row-align 和 -ms-grid-column-align 属性。这两个属性分别定义如何对齐行或列中的项。在我们的示例中，我们在 "big_pic" 的 ID 选择器中将这两个属性都设置为 center：
CSS
复制
#big_pic {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-row-span: 3;
padding: 15px;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
}
你可以查看此版本的页面。
将网格与媒体查询一起使用
我们的布局在横向模式中看起来不错。当查看设备是纵向模式时，又会怎样呢？在此示例中，我们可以使用媒体查询。
通过使用媒体查询，我们可以重新定义布局的各个方面，以便将其定制为纵向布局。要将特定于纵向布局的样式添加到样式表，应首先添加媒体查询语法：
CSS
复制
@media all and (orientation: portrait) {
}
在媒体查询用语中，纵向布局定义其宽度大于其高度的页面。相反，页面高度大于其宽度时，页面为横向。
现在，我们为其他页面元素添加新的网格布局和一些新样式。我们将在媒体查询的花括号之间添加这些样式：
CSS
复制
#grid {
-ms-grid-columns: 150px 25px 1fr;
-ms-grid-rows: 100px 25px 1fr 25px 100px;
}
#text_box {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-row-span: 1;
}
#big_pic {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
}
#photos {
-ms-grid-row: 5;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
}
#logo {
-ms-grid-row: 1;
-ms-grid-column: 1;
text-align: center;
padding: 20px;
}
#logotype {
font-size: 15px;
}
#pagedesc {
font-size: 12px;
}
#mainphoto {
width: 100%;
border-width: 10px;
border-color: white;
}
现在，你可以查看完成的页面。如果你没有可以用来以纵向模式查看页面的设备，请在桌面版 Internet Explorer 中打开页面，并调整其大小，使其宽度小于其高度。
使用网格创建元素叠加
CSS 网格为页面布局创造了更多可能性。例如，使用网格可以轻松创建内容叠加，将内容叠加与不透明度属性组合在一起时，可以在图像上创建文本半透明带。要了解详细信息和观看网格叠加的实际操作，请参见 Internet Explorer 示例库中的 CSS 网格叠加示例。
总结
现在，你应该对网格布局的可能性以及如何结合使用网格属性与媒体查询有了一些了解。要了解更多内容，请参见以下部分中的链接。
相关主题
Contoso 图像照片库
网格布局
Internet Explorer 10 开发者指南：网格布局
IE 博客：IE10 Platform Preview 和 CSS 自适应布局特点
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
