跳到主要内容

栅格结构

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

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

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

选择了框架和库,会带有网页栅格模块,如 BootstrapYUIAnt DesignElement UIiView;也可以从框架和库中单独抽取栅格部分出来,本篇案例是从 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>

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

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

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


扩展阅读:


更新日志:

  • 2015-07-19