网格设计体现了秩序和精确。本质上，网格允许使用对齐、对称、适当的空白，从战略和系统上来组织排版和设计元素，最终实现令人愉悦和易读的设计。网格布局可以在多种布局类型的基础上实现，但设计师们通常认为弹性的布局要难得多，无法与传统的网格体系相提并论。但在本章中，这并不是必要的。
本质上，通过合理地使用DIV层、百分比和一些简单的数学运算，就可以创建一个自适应网格布局。
一个经典的计算这个比例关系的方法是，通过将给定像素高度元素与容器的尺寸相除，得到字体大小（即上下文）。最后，得到了期望的、使用相对值的、类似 em或百分比的比例关系。这个公式就是：目标÷ 环境=结果。
如果将这个公式应用到设计中，就可以得到一个稳定的自适应布局。但是，实际上是希望得到网格布局，所以接下来要创建一个总宽为988 px，等分为7个124 px宽、之间有20 px分割的固定宽度布局。
假设现在布局中有一个700 px宽的＜h1＞元素（横跨了5 列和4 个空槽：5×124 px+4×20 px=700 px）。这个元素应该为块状元素并且在布局中居中（也就是具有288 px的外边距，左右各144 px）。
为了计算＜h1＞的相对单位，将700 px（目标）与988 px（内容）相除，得到700÷988=0.708 5。也就是70.85%，可以修改样式表为：
h1 {
width: 70.85%;/* 700px / 988px = 0.7085 */
}
同时，对于外边距需要小心地处理，期望的左边距是144 px（目标），再次使用公式来计算相对宽度：144÷988=0.145 75，相对宽度就是14.575%，最后代码如下所示：
h1 {
margin-left: 14.575%;/* 144px / 988px = 0.14575 */
width: 70.85%;/* 700px / 988px = 0.7085 */
}
将这种方法应用到布局中的所有元素上，会得到一个稳定、灵活、自适应的网格布局。这是一种非常简单的概念，但在流式设计中可以带来高效的处理比例平衡的方法。有了这种技术，设计师就不能再抱怨维护比例是如何困难或者是怎样破坏他们布局的美感了。
一个简单的网格布局，只有一个标题区域、信息区域和一块很大的内容区（图4.7）。
图4.7
设计师可以用不同的方式定义元素之间的边距值，其中一个就是计算边距的相对比例（在本例中，20 px÷880 px）。另外一个就是固定边距，在本例中，就设置为20 px。
每种方法都有其优点和缺点。使用相对的边距值，虽然能够达到较好的平衡比例，但设计师就会承担在宽屏上边距过大的风险。固定边距虽然在边距上有一点不完美，却确保了在不同浏览器尺寸情况下一致的外观。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
