重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
Win8HTML5与JS编程学习笔记（二）-创新互联
近期一直受到win8应用的Grid布局困扰，经过了半下午加半个晚上的奋斗，终于是弄明白了Grid布局方法的规则。之前我是阅读的微软官方的开发教程，书中没有详细说明CSS3的布局规则，自己鼓捣了半天也是一头雾水，于是又找到了官方的启蒙教程的布局一张，仔细阅读了一遍，又思考了代码，并在代码的基础上实验，终于是明白了布局方法。官方教程地址是：http://msdn.microsoft.com/zh-cn/library/windows/apps/jj841108.aspx
微软基于CSS3开发了Grid布局方法，它的思路是定义主网格容器与子网格容器，在主网格容器中划分网格，在子网格容器中直接选择所在位置。一般所选用的容器都是div元素，难点在于div的相互嵌套中主网格容器与子网格容器的关系。
一、单层div的容器用法
首先定义一段简单的html代码，包含了一个div块级元素和一些成员，如下：
现在的显示布局为：
接下来通过设置CSS来修改它。
第一步是定义主网格容器，即把mainGrid定义为主网格容器，方式如下：
#mainGrid { display:-ms-grid; -ms-grid-columns:auto; -ms-grid-rows:480px 480px; }其中display属性指明为-ms-grid网格布局类型容器，其中ms代表微软，下面的-ms-grid-columns与rows分别指定了行和列的划分距离，每一个数据代表网格中的一个部分，不同部分之间用空格分隔，例如上面的代码指明了一列、两行网格，其中列随显示元素的大小变化，两行都是480px那么长。
然后是对主容器内元素进行定义，因为元素直接在主网格容器之内，所以直接调用即可，如下：
#displayImg{ -ms-grid-row:1; } #button1{ -ms-grid-row:2; }这里和主容器相比去掉了s，使用-ms-grid-row或者column来定位它位于网格的哪一个部分，可以看到图片元素选择了第一行，按钮元素选择了第二行，由于只有一列，所以无需选择。这就相当于把图片和按钮放入网格的上半部分和下半部分。
接下来对图片的大小进行优化，使用max-height与max-width属性可以指定图片显示的极限大小；使用height与width则强制规定图片显示的大小。
对于图片元素，添加限制后变为如下CSS代码：
#displayImg{ -ms-grid-row:1; width:480px; max-height:320px; }显示效果如下：
由此可见利用网格可以高效的实现美观的布局。
二、多层div的容器用法
对于多层的div嵌套，一般思路是由最外层规定总体网格布局，然后由第二级网格布局继续分割，直至进入最底层div，也就是说上一级div是本级div的主网格布局，只有最内层div内部的元素才是纯粹的子网格布局。换句话说，在中间层的CSS代码中，会出现带s和不带s的row与column同时出现的情况。
需要注意的是，不连续的容器与元素之间不能直接传递网格，例如A为div，B为A内元素，C为A内层的div，D为C内元素，则A的属性可以作用于B和C，但不能作用于D，在C内需重新定义二级主网格容器。定义网格容器千万不要忘记display属性，并且带s的row与column属性与不带s的可以并存，从而可以实现对网格内部的继续分割，具体过程如下：
首先在最外层div内部再嵌套一层div元素，并放置一个p元素与一个按钮元素，如下：
