栅格结构

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

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

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

选择了框架和库,会带有网页栅格模块,如 Bootstrapopen in new windowYUIopen in new windowAnt Designopen in new windowElement UIopen in new windowiViewopen in new window;也可以从框架和库中单独抽取栅格部分出来,本篇案例是从 PureCSSopen in new window 中抽取:

<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>
1
2
3
4
5
6
7
8
9
10
11
12

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

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

传统布局方案可以采用 floatdisplay: inline-block/table/table-cellposition 实现,现代浏览器可用采用进入“候选推荐标准”阶段的 flexboxopen in new window 布局模型;也可以尝试尚在“首个公开工作草案”阶段的 gridopen in new window 布局模型。

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


扩展阅读:


更新日志:

  • 2015-07-19

(本篇结束)

CC BY-NC-ND 4.0

Last Updated: 2021/7/10下午8:54:57
Contributors: xianghongai