Grid栅格布局

2024-06-19 00:13:47首发，2个月前更新

grid栅格布局可以替代传统的table布局；grid布局即可模拟table存放数据，也可以模拟flex弹性布局做多栏目多列布局；本框架的布局方式主要是flex布局和grid布局。

特性

相对于layout用于页面布局，本框架的grid栅格布局主要用于列表页面，自动确定列宽。grid栅格与layout布局在用法上有诸多相似之处，也有自己的独特使用方法。

grid布局是替代table布局的最优方式，既可以保证数据循环，又方便修改某一项属性，最重要的是可以满足各终端自适应要求，归纳grid布局特性如下：

1. 支持fence和fluid两种末尾封闭方法；
2. 支持默认显示列数，默认是4列，通过_grid-[1~24]方法定义默认列数；
3. 支持使用间隙，使用_g[-*]表示弹性元素之间的间隙，例如_grid _g-sm表示12px的间隙；
4. 支持在不同终端自动调整等分数量；

使用方法

采用父子结构，例如ul+li，对父元素使用_grid类名即可构成默认的一行四列等宽布局。

自定义列数

对父元素追加_avg-[1~24]类名，可实现自定义列数，例如_grid _avg-3表示一行显示三列。

常用类名

类名	说明	举例
_grid	主类名，默认一行显示四列。	-
_avg-*	参数*可填1~24，表示一行显示多少列。	-
_fence	模拟表格，最后一行无缺口。	-
_fluid	模拟表格，最后一行可能有缺口。	例如有两个_flex的子元素分别是A和B，则A和B各占剩余空间50%

比例类名

grid布局的宽高比是以aspect-ratio样式实现的，内置了几个常见比例。

类名	说明	举例
_ratio	宽高比：1:1	<div class="_grid _ratio"></div>
_ratio-11	宽高比：1:1	<div class="_grid _ratio-11"></div>
_ratio-169	宽高比：16:9	-
_ratio-1610	宽高比：16:10	-
_ratio-43	宽高比：4:3	-
_ratio-32	宽高比：3:2	-

间隙类名

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.2rem的间隙	<div class="_grid _g-md"></div>
_g-lg	栅格子元素之间有2.8rem的间隙	<div class="_grid _g-lg"></div>
_g-xl	栅格子元素之间有3.8rem的间隙	<div class="_grid _g-xl"></div>
_g-xxl	栅格子元素之间有4.4rem的间隙	<div class="_grid _g-xxl"></div>

自适应类名

grid布局支持在不同终端下自动以均分列表形式显示。

类名	说明	举例
_xxs-*	手机端(width<=500)下一行（列）显示几个，*的值范围为1~24	<div class="_grid _xxs-2"></div>表示在手机端一行显示2个
_xs-*	普通平板端(500<width<=900)下一行（列）显示几个，*的值范围为1~24	<div class="_grid _xxs-2 _xs-3"></div>表示在平板端一行显示3个，在手机端显示2个
_sm-*	高清平板端(900<width<=1200)下一行（列）显示几个，*的值范围为1~24	-
_md-*	笔记本电脑端(1200<width<=1500)下一行（列）显示几个，*的值范围为1~24	-
_lg-*	桌面电脑端(width>=1500)下一行（列）显示几个，*的值范围为1~24	-

其他类名

还有一些不常用，但是有效的样式类。

类名	说明	举例
_clip	在终端自适应中（使用了_xxs-*~_lg-*）只显示第一行	<div class="_grid _clip"></div>