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

在线预览    源码下载