栅格结构

页面由几个主干结构支撑和区分，主干结构 (Site/Page) 内部由多个区块 (Section) 组成的布局，区块作为弹性布局或定宽布局的钩子，可以实现通栏背景。区块内部则是栅格列 (Grid)，格子列里是各模块 (Module) 和组件 (Component)，各模块和组件可有边框、内外边距。

栅格的实现：将区域按比例纵 (Column) 横 (Row) 划分成多个单元，各单元间距一致。

关键的三个数值：Count (栅格划分的个数)、Width/Height (栅格单元尺寸)、Gutter (槽宽/间距)；

选择了框架和库，会带有网页栅格模块，如 Bootstrap、YUI、Ant Design、Element UI、iView；也可以从框架和库中单独抽取栅格部分出来，本篇案例是从 PureCSS 中抽取：

<section class="section">
  <div class="section__wrapper">
    <div class="pure-u-3-8">
      <!-- module -->
    </div>
    <div class="pure-u-5-8">
      <div class="gutter">
        <!-- module -->
      </div>
    </div>
  </div>
</section>

左右间距的实现有两种方案，如果不考虑 IE8以下浏览器，可以直接给列选择器声明 box-sizing: border-box; padding-right: $grid-gutter-width/2; padding-left: $grid-gutter-width/2; 样式属性(要兼容 IE8不可给列选择器声明 min/max-width/height )；如果要兼容旧浏览器可以采用 polyfill 或在列选择器中再添加一个只用来控制间距的层 <div class="gutter"></div>。

栅格用结构层不设置边框和外边距。

传统布局方案可以采用 float、display: inline-block/table/table-cell、position 实现，现代浏览器可用采用进入“候选推荐标准”阶段的 flexbox 布局模型；也可以尝试尚在“首个公开工作草案”阶段的 grid 布局模型。

经过主干结构和栅格结构，至此文档大致如下图所示：

---

扩展阅读：

• 网页栅格系统研究(1): 960的秘密
• 网页栅格化研究(2): 蛋糕的切法
• 网页栅格系统研究(3): 粒度问题
• 网页栅格系统研究(4)：技术实现
• The Different Kinds of CSS Layout - CSS-Tricks
• 渐进增强式布局探讨(上)
• 渐进增强式布局探讨(下)
• W3C Process Document

---

更新日志：

• 2015-07-19