layui 栅格布局学习记录

栅格系统

官方文档 https://www.layui.com/doc/element/layout.html#grid

首先是规则的定义
将容器进行了 12 等分，预设了 4*12 种 CSS 排列类

1. class=“layui-row” 表示行。
2. class="layui-col-md* " 定义列，放在行内。
   (1) md 代表不同屏幕的设置，可替换：【xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）】
   (2) * 该列所占用的12等分的份数（1-12）总数大于12 另起一行。
3. 列间距
   通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，
   （如果需要的间距高于30px（一般不常见），请采用偏移） 分别是：

4. 列偏移：
类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移3个列宽度

5. 栅格嵌套 ，

以上是栅格的基础规则。 下面Demo 测试下