1、第一步：新建一个layui的页面，引入layui.js和layui.css，如图：
2、第二步：响应式布局，页面平分，代码如下：
<div class="layui-row">
<div class="layui-col-xs6">
<div class="grid-demo grid-demo-bg1">6/12</div>
</div>
<div class="layui-col-xs6">
<div class="grid-demo">6/12</div>
</div>
</div>
3、第三步：运行上面的代码，可以发现页面被平分了，如图：
4、第四步：移动设备、平板、桌面端的复杂组合响应式展现，代码如下：
<div class="layui-row">
<div class="layui-col-xs12 layui-col-md8">
<div class="grid-demo grid-demo-bg1">移动：12/12、桌面：8/12</div>
</div>
<div class="layui-col-xs6 layui-col-md4">
<div class="grid-demo">移动：6/12、桌面：4/12</div>
</div>
<div class="layui-col-xs6 layui-col-md12">
<div class="grid-demo grid-demo-bg2">移动：6/12、桌面：12/12</div>
</div>
</div>
5、第五步：运行上面的代码，可以看到效果，如图：
6、第六步：在响应式布局的时候，有时候还需要控制列间隔，代码如下：
<div class="layui-row layui-col-space1">
<div class="layui-col-md3">
<div class="grid-demo grid-demo-bg1">1/4</div>
</div>
<div class="layui-col-md3">
<div class="grid-demo">1/4</div>
</div>
<div class="layui-col-md3">
<div class="grid-demo grid-demo-bg1">1/4</div>
</div>
<div class="layui-col-md3">
<div class="grid-demo">1/4</div>
</div>
</div>
7、第七步：运行上面的代码，可以看到效果，如图：
8、第八步：layui响应式布局还有很多，可以参照官网文档