iceui栅格系统
iceui提供了一套响应式、移动设备优先的流式栅格系统定义了12列，随着屏幕或视口（viewport）尺寸的变化，列会根据屏幕大小自动重新排列，该栅格系统比Bootstrap更加灵活，增加了一套可自定义1-12列的等宽，Bootstrap例如想要设置5列7列等宽，只能使用col，但是该类的最大缺点就是无法根据各类屏幕尺寸显示不同的列，例如在电脑屏幕上显示7列，平板上显示5列，手机上显示2列，iceui栅格系统可根据自己的需求自定义排版，以下是基本演示：
栅格类
- 首字母：
- w 指的英文width
- o 指的英文order
- - 横杠表示向右偏移
- 自适应尺寸：
- ws >=576px 针对手机端
- wm >576px 针对平板
- w >=768px（默认使用）针对桌面显示器
- wl >=992px 桌面显示器
- wx >=1200px 桌面显示器
- w- 左偏移
- 例如：
- w6 占用6个网格的宽度
- w-2 左偏移2个网格的宽度
- ws6 移动端中占用6个网格
- ws-2 移动端中做偏移2个网格
- o2 设置弹性盒对象元素的顺序为2
- 反向栅格方式：
- wz 一行需要放置几列的栅格，
- 例如：
- wz5 一行可以放置5列的栅格，相当于100% / 5
- wz3 一行可以放置3列的栅格，相当于100% / 3
很多人会把w与wz混淆，我举个例子来说明一下，例如：w6与wz6，w6是占据了6列宽的格子，基于栅格系统整行12列的宽度，宽度占据整行的100%/(12/6)；wz6是可以放置6列，宽度占据整行的100%/6
栅格系统规则
- 使用行来创建水平的列组
- 内容需要放置在列中，并且只有列可以是行的直接子节点
- w字母开头的列宽，需要放在
.row之中
- 网格列是通过跨越指定的12个列来创建。 例如，设置三个相等的列，需要使用用三个
.w4 来设置
- iceui使用flexbox（弹性盒子）而不是传统方式的浮动（例如国外的Bootstrap3「Bootstrap4才改为flexbox」，国内的layui），Flexbox
的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列
栅格基本结构
等高响应式列
我们内容多1
我们内容多2
我们内容多3
我们内容多4
等宽响应式列
不等宽响应式列
手机、平板和桌面端
列偏移
排序