Grd是一款基于Flexbox的CSS网格系统框架。通过这个CSS网格框架，你可以在页面中进行各种形式的网格布局。它默认采用和Bootstrap相同的12列布局。它的特点还有：
- 使用简单，布局时只需要使用
Grid和cell这两个class类。 - 轻量级，压缩后的版本只有512字节。
- 可以使用Flexbox的所有特性。
安装
可以通过bower或npm来安装Grd网格系统框架。
$ bower install grd
$ npm install grd
使用方法
使用该网格系统框架需要在页面中引入grd.css文件。
<link rel="stylesheet" type="text/css" href="dist/grd.css">
HTML结构
使用一个块级元素作为该网格系统的包裹容器，在该元素中添加class Grid。然后在该父容器中可以添加多个网格，为每个网格元素设置需要的class类：Cell -nof12，其中-n代表该网格占多少列。
<div class="Grid">
<div class="Cell -3of12">3of12</div>
<div class="Cell -9of12">9of12</div>
</div>
Grid
在.Grid中，可以通过下面的class类来设置网格的对齐和居中方式。
要通过align-items来对齐网格，可以使用下面的class类：
-top：顶部对齐。-middle：垂直居中对齐。-bottom：底部对齐。-stretch：拉伸网格。-baseline：基线对齐。
例如：
<div class="Grid -top">
......
</div>
要通过justify-content来对内容进行布局，可以使用下面的class类：
-left：左对齐。-center：水平居中对齐。-right：右对齐。-between：在两个网格之间增加空间。-around：在网格周围增加空间。
Cell
网格cell中的class类代表的含义如下：
-fill：网格的宽度为父元素左侧的宽度。-1of12：网格大小为父元素的 8.3%。-2of12：网格大小为父元素的 16.7%。-3of12：网格大小为父元素的 25%。-4of12：网格大小为父元素的 33%。-5of12：网格大小为父元素的 41.7%。-6of12：网格大小为父元素的 50%。-7of12：网格大小为父元素的 58.3%。-8of12：网格大小为父元素的 66.7%。-9of12：网格大小为父元素的 75%。-10of12：网格大小为父元素的 83.3%。-11of12：网格大小为父元素的 91.7%。-12of12：网格大小为父元素的 100%。
Grd网格系统框架的github地址为：https://github.com/1000ch/grd
