当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

使用该网格系统框架需要在页面中引入grd.css文件。

```html
<link rel="stylesheet" type="text/css" href="dist/grd.css"> 
```
#####  HTML结构
使用一个块级元素作为该网格系统的包裹容器，在该元素中添加class Grid。然后在该父容器中可以添加多个网格，为每个网格元素设置需要的class类：Cell -nof12，其中-n代表该网格占多少列。

```html
<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：基线对齐。
例如：

```html
<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%。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果