栅格系统
官方文档 https://www.layui.com/doc/element/layout.html#grid
首先是规则的定义
将容器进行了 12 等分,预设了 4*12 种 CSS 排列类
- class=“layui-row” 表示行。
- class="layui-col-md* " 定义列,放在行内。
(1) md 代表不同屏幕的设置,可替换:【xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕)】
(2) * 该列所占用的12等分的份数(1-12)总数大于12 另起一行。 - 列间距
通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距,
(如果需要的间距高于30px(一般不常见),请采用偏移) 分别是:
4. 列偏移:
类似 layui-col-md-offset* 的预设类,从而让列向右偏移。其中 * 号代表的是偏移占据的列数,可选中为 1 - 12。
如:layui-col-md-offset3,即代表在“中型桌面屏幕”下,让该列向右偏移3个列宽度
5. 栅格嵌套 ,