1、介绍
Layui将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。利用栅格可以快速的对网页进行模块化设计，将各个功能区以不同颜色展示（类似设计一个网页草图），后期可根据要求将颜色删除或更改。
2、使用
（1）基础规则
行定义：
<div class="layui-row">列div</div>列定义：
<div class="layui-col-xx*">内容,列要放在行内</div>
注：
- <div class="layui-col-md4"> 意思是将中等屏幕分为12份后，占4份的宽度。
- xx为不同屏幕下的标记，xs（超小屏幕，如手机）、sm（小屏幕，如平板）、
md（桌面中等屏幕）、lg（桌面大型屏幕) ；- *为将屏幕分为12份后所占比例，如3/12（取值范围：1~12）如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行 ;
- 内容：在列（column）元素中放入你自己的任意元素填充内容，完成布局。建议先写模块功能名称，整体布局后再添加其他元素和模块来实现功能，如果内容为空, 栅格将不显示。
示例代码：
<!--将整个栅格居中处理-->
<div class="layui-container" style="margin-top: 100px;">
<div class="layui-row"> <!--行定义-->
<!--下面以中等屏幕为例，列div默认透明，这里追加了layui-bg-color类来区分也可以有css添加背景颜色-->
<div class="layui-col-md3 layui-bg-green "> <!--列定义 -->
基础规则 3/12 <!--每个列的内容必须有，不然即使追加了颜色，本块div也显示不出来-->
</div>
<div class="layui-col-md5 layui-bg-blue">
基础规则 5/12
</div>
<div class="layui-col-md4 layui-bg-orange">
基础规则 4/12
</div>
</div>
</div>
(2)增高
栅格的行和列(layui-row、layui-col-xx*)并没有对高度进行设置，因此我们要自己设置。
- 通过对行div(layui-row修饰的div)添加行高（line-height）属性来设置；
- 如果有特殊需求也可以对列div（layui-col-xx*修饰的div)添加高度（height）属性来设置高度。
- 其他属性如：border等，也可按需添加。
示例代码：
<div class="layui-container" style="margin-top: 100px;">
<!--将这一行中所有列高度设为100px-->
<div class="layui-row" style="line-height: 100px;">
<div class="layui-col-md2 layui-bg-gray">
增高 2/12
</div>
<div class="layui-col-md3 layui-bg-green">
增高 3/12
</div>
<div class="layui-col-md4 layui-bg-red">
增高 4/12
</div>
<div class="layui-col-md3 layui-bg-cyan">
增高 3/12
</div>
</div>
</div>
(3)列间隔
通过在行div上追加“列间距”的预设类（layui-col-spaceX），来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。
X的取值为 1-30px区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔，例：layui-col-space10，超出30px建议使用列偏移。
示例代码：
<div class="layui-container" style="margin-top: 100px;">
<!--在每列之间加间隔 layui-col-space10就是在每列添加10px的间隔-->
<div class="layui-row layui-col-space10"style="line-height: 100px;">
<div class="layui-col-md6">
<!--加颜色时要将颜色放在最里面，否则间隔将不起作用-->
<div class="layui-bg-black">列间隔 6/12 </div>
</div>
<div class="layui-col-md2 ">
<div class="layui-bg-orange">列间隔 6/12 </div>
</div>
<div class="layui-col-md2 ">
<div class="layui-bg-red">列间隔 6/12 </div>
</div>
<div class="layui-col-md2 ">
<div class="layui-bg-gray">列间隔 6/12 </div>
</div>
</div>
</div>
(4)列偏移
对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。md也可换位前文说到的xs、sm、lg。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度。
示例代码：
<div class="layui-container" style="margin-top: 100px;">
<div class="layui-row"style="line-height: 100px;">
<div class="layui-col-md5 layui-bg-red">
列偏移 5/12
</div>
<!--通过对第二块追加layui-col-md-offset2类，实现左右对齐效果-->
<div class="layui-col-md5 layui-col-md-offset2 layui-bg-cyan">
列偏移 5/12
</div>
</div>
</div>
(5)栅格嵌套
理论上，可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row）即可。
下面的例子先将一行分成了两列（5/12和7/12），将5/12的一列添加了一行，并对这一行添加了三列，大小分别为4、8、12，因为前两行和为12，故第三列另起一行。又将7/12的列类似的添加了大小分别为3、4、5、12的四列。
栅格测试.png
示例代码：
<div class="layui-container" style="margin-top: 100px;">
<div class="layui-row layui-col-space10" style="line-height: 100px;">
<div class="layui-col-md5 ">
<div class="layui-row ">
<div class="layui-col-md4 ">
<div class="layui-bg-black">5/12的4/12 </div>
</div>
<div class="layui-col-md8 ">
<div class="layui-bg-gray">5/12的8/12 </div>
</div>
<div class="layui-col-md12 ">
<div class="layui-bg-orange">5/12的12/12 </div>
</div>
</div>
</div>
<div class="layui-col-md7 ">
<div class="layui-row ">
<div class="layui-col-md3 ">
<div class="layui-bg-blue">7/12的3/12 </div>
</div>
<div class="layui-col-md4 ">
<div class="layui-bg-cyan">7/12的4/12 </div>
</div>
<div class="layui-col-md5 ">
<div class="layui-bg-red">7/12的5/12 </div>
</div>
<div class="layui-col-md12 ">
<div class="layui-bg-black">7/12的12/12 </div>
</div>
</div>
</div>
</div>
</div>
3、整体测试效果
整体测试效果.png
注：
- 本文并未提及官方文档中写的栅格响应，以后有机会、需要会补充上来。
- 测试栅格嵌套时，并未出现和官网类似的效果，以后发现原因会更正过来。
网友评论