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

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12

<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

（本篇结束）

许可协议：自由转载-保持署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)

By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-9-grid-layout.html