Grd-基于Flexbox的CSS网格系统框架

当前位置:主页 > CSS3库 > UI界面设计 > Grd-基于Flexbox的CSS网格系统框架
Grd-基于Flexbox的CSS网格系统框架
分享:

    插件介绍

    Grd是一款基于Flexbox的CSS网格系统框架。通过这个CSS网格框架,你可以在页面中进行各种形式的网格布局。它默认采用和Bootstrap相同的12列布局。

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-09
    阅读:
简要教程

Grd是一款基于Flexbox的CSS网格系统框架。通过这个CSS网格框架,你可以在页面中进行各种形式的网格布局。它默认采用和Bootstrap相同的12列布局。它的特点还有:

  • 使用简单,布局时只需要使用Gridcell这两个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

网友评论