您的位置：首页 > Web前端 > CSS

如何使用CSS网格创建一个自适应布局

2013-06-06 00:00 811 查看
毫无疑问，当开发人员谈到网页布局时会有很多选择。为了确保你的布局可以适应不同设备、方向和屏幕大小，你需要慎重考虑清楚，你要使用哪些方法来布局。网格布局是一个新的布局方法，使你可以把网页的主要区域在游览器窗口内设置一个固定大小或者自由空间，你也可以两个同时使用。

因为网格布局使用您能够根据列和行对齐，但没有内给结构，它还使场景像这篇文章中描述的，要么是不可能或很难用HTML和CSS样式实现。但你使用网格布局和媒体查询结合，你可以使你的布局来适应设置变化，比如定位、可用空间等。
CSS网格布局规范还只是一个工作草案，在IE10下使用私有前缀可以支持部分属性。支持的属性列表可以查看MSDN上的网格布局。因为网格布局规范依在发展，IE10支持的属性可能和制定的规范不一定完全相同。

这里我们指导您使用网格布局来创建一个图片游览库的灯箱效果。我们使用网格布局组织页面的内容，和用媒体查询来优化布局，用于横屏竖屏都能查看。在竖屏中，浏览器高度大于其宽度，在横屏中，浏览器宽度大于其高度。

这个主题包括以下几个部分：
设计页面

创建网格

构建页面

创建网格元素和指定列与行

关于分数单位

分配页面元素到列和行

调整网格项目

使用网格与媒体查询

创建元素重叠网格

总结

有关主题

设计页面

我们希望这个灯箱效果页面在IE10浏览器中占满整个屏幕，而不想滚动条出现。当然，这个页面在IE10中能很好的展示，那么在Chrome这样的浏览器应该能很好的符合。

下面的图例接近我们到底希望灯箱页面的展示效果。我们假设选择的草图占据整个浏览器屏幕宽度的16:9。


在这个草图中，A是一个小区域用来放logo，B区域用来放图片标题或描述，C区域是主要图片的浏览区，D是缩略图片区域。

因为灯箱页面旨在查看全屏，所以我们就必须考虑到不同的屏幕大小。页面的重点就是查看大照片。因此，当屏幕尺寸扩大时，我们也要让图片面板C区也扩大。但要防止A区扩张到整个屏幕大，也要防止B区横向扩张，D区垂直扩张。


创建网格

这种场景用网格来布局很理想。为了帮助构建网格，我们将添加点线来完成不可见的网格线。为了防止页面元素之间设计显得太拥挤，我们将给元素之间添加一点间距。间距可以是行和列的固定宽度或高度。

在这个图像中，紫色的虚线代表网格元素或者网格容器。红色的虚线代表的是网格线。


这是一个五行三列的网格：
网格中第二行、四行和第二列都是间距。

第一行和最后一行都设置了固定高度，第一行的高度是A区的高度，最后一行的高度是D区的高度。

第三行的高度是自适应的，让布局适应不同尺寸的屏幕。

第一列有一个固定宽度，宽度是A区和B区的固定宽度。

最后一列的宽度是自适应的，让布局适应不同尺寸的屏幕。

构建页面

让我们开始写一个网格标记。首先，我们写一点简单的HTML来获得一个基本结构的页面。请注意，区域的结构顺序并不是按照草图的结构的创建的，但这是网格布局中的一个优势：如果你想重新排序，你可以不根据文档的DOM结构重新排列元素的顺序。

<!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”，我们的样式可以这样写：

#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）。分数单位的大小取决于可用空间和总数量的分数值比例。在我们这个实例中，我们只用了一个分数单位，但更复杂的布局也是可能的。例如，考虑这样的一种情况：四列分别指定宽度为：auto 100px 1fr 2fr，这样列将会按下面所说的展示：
第一列（关键词auto）：列宽根据列里面的内容来决定。

第二列（100px）：列宽度为100像素。

第三列（1fr）：列宽度占用一个分数单位的剩余空间。

第四列（2fr）：列宽度占用两个分数单位的剩余空间。
因为在这个网格中有三个分数单位，第三列是占了三个分数单位中的一个，所以他就是占了剩余空间的三分之一。同样原理，第四列列宽度占了剩余空间的三分之二。


分配页面元素到列和行

如果你看了现在的页面，这绝对是没有做好准备的。页面上所有不同元素互相重叠，因为我们还没有定义每外元素应该放在哪一列。我们可以通过：-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 (适合内容)，这时要为每一列或行定义一个号码：

#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”同时设置了这两个属性的值为“center”，实现水平垂直居中：

#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;
}




你可以查看这个页面的效果。


使用网格与媒体查询

我们的布局在宽屏下看起来不错。如果查看的设备在一个竖屏下又会如何呢？在这种情况之下，我们可以使用媒体查询。

使用媒体查询，我们将重新定义布局，以适应不同的屏幕方向。添加具体屏幕方向的样式，首先要添加媒体查询的语法：

@media all and (orientation: portrait) {

}

根据媒体查询的说法，横屏（orientation: portrait）定义了一个页面的宽度大于他的高度，相反，竖屏（orientation: landscape）定义了一个页面的高度大于他的宽度。

现在，我们将为其他页面元素添加一个新的网格布局和一些新的样式。将这些样式放入面前媒体查询的花括号内：

#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;
}

现在，你可以查看最后版本的页面效果。如果你没有设备可以测试屏幕的旋转，你可以用你的IE10打开，并且缩小浏览器窗口的大小，直到宽度小于他的高度。你就可以看到上面的效果。



创建元素重叠网格

CSS网格提供了很多可能性的页面布局。例如网格可以帮助你创建内容层叠效果，如半透明的文本在一张图片之上。更多的信息可以查看网格的层叠，你可以查看IE开发实例中的 CSS Grid overlay sample。


总结

你现在应该对网格布局有了一个认识，以及如何使用网格属性和媒体查询，如果想了解更多，请看下一节中的链接。


有关主题
Contoso Images photo gallery

Grid Layout

Internet Explorer 10 Guide for Developers: Grid layout

IE Blog: IE10 Platform Preview and CSS Features for Adaptive Layouts


扩展阅读


Grid

CSS3 Grid Layout

使用CSS3 Grid布局实现内容优先

CSS3网格布局介绍——网格的运行

CSS Grid Layout

IE10 and the Future of CSS Layout

CSS Grid Layout

Understanding the Difference between CSS3 Flexbox & Grid Layout

FUTURE OF CSS LAYOUT: CSS GRID

Farewell Floats: The Future of CSS Layout

Master the new CSS layout properties

The future of CSS layouts
——大漠

特别声明，本文是根据MSDN上的How to create an adaptive layout with CSS Grid一文所译，由于没有找到对应的作者是谁，特在此处声明原文来处。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://msdn.microsoft.com/en-us/library/ie/jj553856(v=vs.85).aspx

中文译文：/article/1214501.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航