Grid栅格
grid栅格布局可以替代传统的table布局;grid布局即可模拟table存放数据,也可以模拟flex弹性布局做多栏目多列布局;本框架的布局方式主要是flex布局和grid布局。
特性
相对于layout
用于页面布局,本框架的grid
栅格布局主要用于列表页面,自动确定列宽。grid栅格与layout布局在用法上有诸多相似之处,也有自己的独特使用方法。
grid布局是替代table布局的最优方式,既可以保证数据循环,又方便修改某一项属性,最重要的是可以满足各终端自适应要求,归纳grid布局特性如下:
- 支持
fence
和fluid
两种末尾封闭方法; - 支持默认显示列数,默认是4列,通过
_grid-[1~24]
方法定义默认列数; - 支持使用间隙,使用
_g[-*]
表示弹性元素之间的间隙,例如_grid _g-sm
表示12px的间隙; - 支持在不同终端自动调整等分数量;
使用方法
采用父子结构,例如ul+li
,对父元素使用_grid
类名即可构成默认的一行一列等宽布局。
- 输出
- HTML
-
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
-
自定义列数
对父元素追加_avg-[1~24]
类名,可实现自定义列数,例如_grid _avg-3
表示一行显示三列。
- 输出
- HTML
-
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
-
常用类名
类名 | 说明 | 举例 |
---|---|---|
_grid | 主类名,默认一行显示一列。 | - |
_avg-* | 参数*可填1~24,表示一行显示多少列。 | - |
_fence | 模拟表格,最后一行无缺口。 | - |
_fluid | 模拟表格,最后一行可能有缺口。 | 例如有两个_flex的子元素分别是A和B,则A和B各占剩余空间50% |
比例类名
grid布局的宽高比是以aspect-ratio
样式实现的,内置了几个常见比例。
类名 | 说明 | 举例 |
---|---|---|
_ratio | 宽高比:1:1 | <div class="_grid _ratio"></div> |
_ratio-1x1 | 宽高比:1:1 | <div class="_grid _ratio-1x1"></div> |
_ratio-16x9 | 宽高比:16:9 | - |
_ratio-16x10 | 宽高比:16:10 | - |
_ratio-4x3 | 宽高比:4:3 | - |
_ratio-3x2 | 宽高比:3:2 | - |
_ratio-2x1 | 宽高比:2:1 | - |
_ratio-5x4 | 宽高比:5:4 | - |
间隙类名
grid布局的间隙是以grid-gap
样式实现的,支持0~44px的间隙。
类名 | 说明 | 举例 |
---|---|---|
_g | 栅格子元素之间有1.4rem间隙(同_g-sm) | <div class="_grid _g"></div> |
_g-0 | 栅格子元素之间没有间隙 | <div class="_grid _g-0"></div> |
_g-1 | 栅格子元素之间有1px的间隙 | <div class="_grid _g-1"></div> |
_g-2 | 栅格子元素之间有2px的间隙 | <div class="_grid _g-2"></div> |
_g-3 | 栅格子元素之间有3px的间隙 | <div class="_grid _g-3"></div> |
_g-xxs | 栅格子元素之间有0.4rem的间隙 | <div class="_grid _g-xxs"></div> |
_g-xs | 栅格子元素之间有0.8rem的间隙 | <div class="_grid _g-xs"></div> |
_g-sm | 栅格子元素之间有1.4rem的间隙 | <div class="_grid _g-sm"></div> |
_g-md | 栅格子元素之间有2.4rem的间隙 | <div class="_grid _g-md"></div> |
_g-lg | 栅格子元素之间有3.2rem的间隙 | <div class="_grid _g-lg"></div> |
_g-xl | 栅格子元素之间有4rem的间隙 | <div class="_grid _g-xl"></div> |
_g-xxl | 栅格子元素之间有4.8rem的间隙 | <div class="_grid _g-xxl"></div> |
自适应类名
grid布局支持在不同终端下自动以均分列表形式显示。
类名 | 说明 | 举例 |
---|---|---|
_xxs-* | 手机端中一行(列)显示几个,*的值范围为1~24 | <div class="_grid _xxs-2"></div> 表示在手机端一行显示2个 |
_xs-* | 普通平板端中一行(列)显示几个,*的值范围为1~24 | <div class="_grid _xxs-2 _xs-3"></div> 表示在平板端一行显示3个,在手机端显示2个 |
_sm-* | 平板端横屏中一行(列)显示几个,*的值范围为1~24 | - |
_md-* | 高清平板端中一行(列)显示几个,*的值范围为1~24 | |
_lg-* | 桌面电脑端中一行(列)显示几个,*的值范围为1~24 | - |
_xl-* | 2k桌面电脑端中一行(列)显示几个,*的值范围为1~24 | - |
_xxl-* | 4k桌面电脑端中一行(列)显示几个,*的值范围为1~24 | - |
_hh-* | 手持移动设备中一行(列)显示几个,*的值范围为1~24 | - |
_tb-* | 平板设备中一行(列)显示几个,*的值范围为1~24 | - |
_dt-* | 桌面设备中一行(列)显示几个,*的值范围为1~24 | - |
其他类名
还有一些不常用,但是有效的样式类。
类名 | 说明 | 举例 |
---|---|---|
_clip | 在终端自适应中(使用了_xxs-*~_lg-* )只显示第一行 |
<div class="_grid _clip"></div> |