布局框架
Grd-基于Flexbox的CSS网格系统框架
PetitQ
Grd 是一款基于 Flexbox 的 CSS 网格系统框架。通过这个 CSS 网格框架，你可以在页面中进行各种形式的网格布局。它默认采用和 Bootstrap 相同的 12 列布局。它的特点还有：
使用简单，布局时只需要使用 Grid 和 cell 这两个 class 类
也想出现在这里？联系我们吧
轻量级，压缩后的版本只有 512 字节
可以使用 Flexbox 的所有特性
使用方法
使用该网格系统框架需要在页面中引入 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%。
Github 地址：https://github.com/1000ch/grd
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
