layui栅格布局设置列间距不起作用
layui栅格布局支持设置列间距，只需使用预置类layui-col-space*即可。不过实际使用时却始终看不到效果。
根据layui官网文档的说明，只需要在行所在div元素的class属性中增加layui-col-space*即可出现列间距。如下图所示：
但是实际使用时，一般会在行所在div元素中设置行背景色，此时设置列间距就看不出效果。html示例如下所示（示例代码取自参考文献1），将背景样式放在行所在div元素或者每列所在div元素的效果一样，都看不出间距。
<div class="layui-container"> <div class="layui-row layui-col-space10" style="background-color: red;"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4" >移动：6/12 | 平板：6/12 | 桌面：4/12</div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4">移动：6/12 | 平板：6/12 | 桌面：4/12</div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4">移动：4/12 | 平板：12/12 | 桌面：4/12</div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8">移动：4/12 | 平板：7/12 | 桌面：8/12</div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4">移动：4/12 | 平板：5/12 | 桌面：4/12</div></div>
</div>
百度出来的文章（参考文献2-3）给出的解释是layui的间距样式设置采用的是padding（向内缩）在行div或列div上设置背景色会使整行或当前行的列区域全部显示背景色，向内缩的话不会有什么区别。正确的方式是将列内容再用div包一层，同时设置该层div的背景色，这样就能看出列间距效果。如下所示：
<div class="layui-container"> <div class="layui-row layui-col-space10"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4" ><div style="background-color: red;">移动：6/12 | 平板：6/12 | 桌面：4/12</div></div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4"><div style="background-color: red;">移动：6/12 | 平板：6/12 | 桌面：4/12</div></div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4"><div style="background-color: red;">移动：4/12 | 平板：12/12 | 桌面：4/12</div></div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8"><div style="background-color: red;">移动：4/12 | 平板：7/12 | 桌面：8/12</div></div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4"><div style="background-color: red;">移动：4/12 | 平板：5/12 | 桌面：4/12</div></div></div></div>
同时在行、列、内容上设置背景色时的效果如下所示：
<div class="layui-container"> <div class="layui-row layui-col-space10" style="background-color: rgb(49, 214, 99);"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: rgb(47, 15, 207);"><div style="background-color: red;">移动：6/12 | 平板：6/12 | 桌面：4/12</div></div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4"><div style="background-color: red;">移动：6/12 | 平板：6/12 | 桌面：4/12</div></div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4"><div style="background-color: red;">移动：4/12 | 平板：12/12 | 桌面：4/12</div></div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8"><div style="background-color: red;">移动：4/12 | 平板：7/12 | 桌面：8/12</div></div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4"><div style="background-color: red;">移动：4/12 | 平板：5/12 | 桌面：4/12</div></div></div></div>
参考文献：
[1]https://www.layui1.com/doc/index.html
[2]https://blog.csdn.net/qq_40943363/article/details/118052587
[3]https://www.jb51.net/article/264158.htm