理解什么是栅格布局

栅格布局是一种新兴的布局方式，与弹性布局相似，栅格系统它的思想实际上是将一块大的区域绘制成弹性的小格子，然后将元素填进去即可；只不过相对于传统的弹性布局，栅格布局更具有灵活性、整洁和便于控制性～

layui的栅格布局

1、layui栅格分别有四种类型，分别是：大屏（桌面大型屏幕）、中屏（桌面中型屏幕）、小屏（平板）、超小屏（手机）。

2、layui的栅格是12份数，类名分别是就是 lay-xxx1  到  lay-xxx12；例如：lay-栅格大屏1 到 lay-栅格大屏12；又例如：lay-栅格小屏1 到 lay-栅格小屏12

layui的栅格原理

使用了layui的栅格后，其空间会被分配为12份，例如子内容使用 lay-栅格大屏2 这个类名，则在大屏中该子内容盒子占两份的空间，也就是6个盒子会填满父元素的行。

一段测试的栅格代码如下：

<区块 类名="lay-容器">
	<区块 类名="lay-栅格行">
		<区块 类名="lay-栅格大屏2 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12">
			<区块 类名="lay-红色背景">案例</区块>
		</区块>
		<区块 类名="lay-栅格大屏2 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12">
			<区块 类名="lay-红色背景">案例</区块>
		</区块>
		<区块 类名="lay-栅格大屏2 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12">
			<区块 类名="lay-红色背景">案例</区块>
		</区块>
		<区块 类名="lay-栅格大屏2 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12">
			<区块 类名="lay-红色背景">案例</区块>
		</区块>
		<区块 类名="lay-栅格大屏2 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12">
			<区块 类名="lay-红色背景">案例</区块>
		</区块>
		<区块 类名="lay-栅格大屏2 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12">
			<区块 类名="lay-红色背景">案例</区块>
		</区块>
	</区块>
</区块>

上述代码中，盒子在大屏中显示6份，在中等屏幕中显示4份，在小屏幕中显示两份，在超小屏中显示一份～

知识点：

1、栅格必须被包含在栅格行中，而栅格行通常推荐放在lay-容器中

2、栅格会将父元素进行分割成12份；这12份由子元素进行认领～

采纳500+送小米笔记本电脑