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> |
