这仅仅是一个举例，来说明如何清晰地布局网格系统中的页面元素。

网格系统

一些网格系统及模版可以指导我们布局Web设计元素。下文列举了两个此类系统，你可以修改其中各种设置，如列、排版，并以CSS和HTML格式进行保存，从而快速提供原型，或整合入现存的开发环境中。

由Web开发者Rasmus Schultz提供的Grid Designer 是一个在线工具，它默认提供4列，宽分别为174px，总宽度为800px，其中每列间有20px的间隙，页面两侧分别有22px的留白。在该案例中，默认的排版样式为Veranda：段落内文字大小为10px，行高为1；标题采用默认字体，大小为16px，行高为2。如图4。

图4

960 Grid由Web设计师Nathan Smith设计，可供下载。它提供了一个系统，通过常用维度来分割宽为960px的页面来流程化Web开发。它提供了两种选择：12列和16列，每一种选择即可单独使用也可混合使用。12列网格将宽均衡地分割成12列（每列宽为60px），而16列网格则分割为16列（每列宽40px），每列左右两侧具有10px的间隙，各网格最外侧均留出20px的空白。

图5

响应式对齐

针对响应式Web设计，W3C已推出了CSS弹性框布局模块（CSS Flexible Box Layout Module）工作草案，简称“Flexbox”。Editors Draf于2012年8月13日进行了更新，它描述了CSS框模块的规范，以优化用户界面的设计。在强性布局模块中，弹性容器中的子元素可被定位于任何位置，可“弹性”变换大小，即可以增大充满未用空间，也可缩放以避免溢出，可很容易地对子元素进行水平和垂直对齐。这些框的嵌套（如水平中的垂直嵌套、垂直中的水平嵌套）可用来构建两种维度的布局。图5是来自Editors Draf的一个插图。

图6

原文链接：Effective design principles for web designers： Alignment

编译链接：CSDN