pure.css 源码之 grids 篇

grids，中文翻译为栅格（并不是 grid 布局），用过 BootStrap 应该不会陌生。pure.css 提供了类似的类，具体文档在 这里

具体使用也非常简单，pure-g 类似 BootStrap 中的 row。Bootstrap 是 12 等分的，pure.css 支持 5 等分以及 24 等分。

我们看一个三等分的例子：

<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

很好理解，1-3 就是三分之一嘛，其实是从 8-24 约分过来的，其实用 8-24 也是没有问题的，源码实现就是暴力枚举而已，类似：

.pure-u-1-3,
.pure-u-8-24 {
    width: 33.3333%;
    *width: 33.3023%;
}

.pure-u-3-8,
.pure-u-9-24 {
    width: 37.5000%;
    *width: 37.4690%;
}

完整文件可以参考 grids-units.css

pure 同样支持响应式布局，实现无非就是利用媒体查询，支持 .pure-u-*、.pure-u-sm-*、.pure-u-md-*、.pure-u-lg-* 以及 .pure-u-xl-*，具体响应式对应的屏幕尺寸可以参考 文档，具体的代码在 grids-responsive.css

另外 .pure-g 元素默认用了 flex 布局，而某些浏览器是不支持的，如果要支持这些浏览器，需要引入 grids-responsive-old-ie.css

值得一提的是 源码 中其实是没有栅格相关的代码的，完全是通过 这个插件 自动生成的