无废话网页重构系列——（9）栅格结构

页面由几个主干结构支撑和区分，主干结构(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布局模型。

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