Layui布局和栅格系统

本节课我们来开始了解 Layui 响应式布局的栅格系统。

一．栅格系统

1. 栅格系统是一种布局方案，在 Layui 中一行最多分为 12 个栅格；
2. 支持移动手机、平板、中型和大型 PC 桌面的适配处理，方便响应式切换；
3. 定义栅格系统最外层 div 设置 class 为：.layui-container，此为布局容器；
4. 行的定义 div 设置 class 为：.layui-row，为了方便测试，可以加上背景色；

1

PS：从上面代码运行效果可以看出最大长度 1170px，而一行有两侧内边距 15px；
5. 如果我们想在这一行中，设置三个列可以使用 class 为：.layui-col-md4；

1
2
3

PS：每列占 4 个栅格位，共 12 个铺满一行；md 表示中等 PC 桌面>=992 响应；
PS：在浏览器点击查看元素，可以发现，它是通过 CSS3 媒体查询来实现的；
超小屏幕
(手机<768px)
小屏幕
(平板≥768px)
中等屏幕
(桌面≥992px)
大型屏幕
(桌面≥1200px)
值 auto 750px 970px 1170px
*1-12 等分 layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg* 6. 除了固定大小的布局容器之外，还有 100%流体的布局容器：.layui-fluid；

...

7. 想要实现列布局间距设置，可以使用：layui-col-space*(1-30)；

1


2


3

PS：*号是 1,2,4,5,6,8,10...具体可以看代码提示，最终解析成：margin:-*px；
PS：.a 设置高度，让演示更清晰，不要直接设置 col 的父层，无法实现效果；
8. 如果要实现列偏移，可以使用.layui-col-sm-offset*，*表示一个栅格位；

PS：由于栅格位一行只有 12 列，需要计算好，超过后就会导致换行；