概述
如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和后台布局方案，这意味着你终于可以着手采用 layui 排版你的响应式网站和后台系统了。layui 的栅格系统采用业界比较常见的 12 等分规则，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8。而你应当更欣喜的是，layui 终于开放了它经典的后台布局方案，快速搭建一个属于你的后台系统将变得十分轻松自如。
官网：https://www.layui.com/doc/element/layout.html
使用
样式
<style>
.grid-demo {
line-height: 50px;
text-align: center;
background-color: #79C48C;
color: #fff;
}
.grid-demo-bg1 {
background-color: #00F7DE;
}
</style>
布局容器
layui-container 类
会随着屏幕大小改变成相应的宽度，响应式推荐使用
响应式布局容器 固定宽度：
- 大屏（ >= 1200px ） 宽度为 1170px
- 中屏（ >= 992px ） 宽度为 970px
- 小屏（ >= 768px ） 宽度为 750px
- 超小屏 （ 100% ）
<body> <div class="layui-container" style="background: #2aabd2">大数据男孩</div> </body>
layui-fluid 类
流式布局容器 任何屏幕大小都是百分百宽度，适用于单独的移动端
<body> <div class="layui-fluid" style="background: #2aabd2">大数据男孩</div> </body>
栅格系统
栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理。
| - | 超小屏幕(手机<768px) | 小屏幕(平板≥768px) | 中等屏幕(桌面≥992px) | 大型屏幕(桌面≥1200px) | |
|---|---|---|---|---|---|
| .layui-container的值 | auto | 750px | 970px | 1170px | |
| 标记 | xs | sm | md | lg | |
| 列对应类* 为1-12的等分数值 | layui-col-xs* | layui-col-sm* | layui-col-md* | layui-col-lg* | |
| 响应行为 | 始终按设定的比例水平排列 | 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 | 同前一个 | 同前一个 |
<!-- 中屏每个占 4 份 3 X 4 = 12 格 -->
<style>
.grid-demo {
padding: 10px;
line-height: 50px;
text-align: center;
background-color: #79C48C;
color: #fff;
}
.grid-demo-bg1 {
background-color: #63BA79;
}
</style>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md4 grid-demo" >大数据男孩</div>
<div class="layui-col-md4 grid-demo-bg1" >大数据男孩</div>
<div class="layui-col-md4 grid-demo" >大数据男孩</div>
</div>
</div>
列偏移
对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中* 号代表的是偏移占据的列数，可选中为1 - 12。
如：layui-col-md-offset4，即代表在“中型桌面屏幕”下，让该列向右偏移 4 个列宽度
<div class="layui-container" >
<div class="layui-row">
<div class="layui-col-md4 grid-demo-bg1">大数据男孩</div>
<div class="layui-col-md4 layui-col-md-offset4 grid-demo-bg1">大数据男孩</div>
</div>
</div>
列间距
通过“列间距”的预设类，来设定列之间的间距。且一行中·最左的列不会出现左边距，最右的列不会出现右边距。可以设置 layui-col-space1 ~ layui-col-space30。
<div class="layui-container">
<!-- 间距 10 px -->
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div class="grid-demo">大数据男孩</div>
</div>
<div class="layui-col-md4">
<div class="grid-demo">大数据男孩</div>
</div>
<div class="layui-col-md4">
<div class="grid-demo">大数据男孩</div>
</div>
</div>
</div>
响应式公共类
| 类名（class） | 说明 |
|---|---|
layui-show-*-block |
定义不同设备下的 display: block; *可选值有：xs、sm、md、lg |
layui-show-*-inline |
定义不同设备下的 display: inline; * 可选值同上 |
layui-show-*-inline-block |
定义不同设备下的 display: inline-block; * 可选值同上 |
layui-hide-* |
定义不同设备下的隐藏类，即： display: none; * 可选值同上 |
<div class="layui-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div class="grid-demo">大数据男孩</div>
</div>
<!-- 中屏下隐藏 -->
<div class="layui-col-md4 layui-hide-md">
<div class="grid-demo">大数据男孩2</div>
</div>
<div class="layui-col-md4">
<div class="grid-demo">大数据男孩</div>
</div>
</div>
</div>
