<p>Layui 2.8.0+ 支持 layui-col-space- 系列类设置列间距，如 layui-col-space-15 表示列间总间隙 30px，需加在父容器上。</p>
Layui 的栅格系统本身不直接支持类似 CSS Grid 的 gap 属性，但从 Layui 2.8.0 版本开始，官方正式引入了 layui-col-space- 系列类名，用于设置列（column）之间的间距。
使用内置的 layui-col-space 类（推荐，2.8.0+）
这是最简洁、原生的方式，无需额外写 CSS：
-
layui-col-space-0：无间距（默认） -
layui-col-space-2～layui-col-space-30：数字代表左右两侧各留出的像素值（即列间总间隙 = 数字 × 2），例如layui-col-space-10表示两列之间有 20px 总间隙（每列右/左各 10px） - 需将该类加在 父容器（如 row） 上，而不是单个列上
示例：
<div class="layui-row layui-col-space-15"><div class="layui-col-md4">左侧</div>
<div class="layui-col-md4">中间</div>
<div class="layui-col-md4">右侧</div>
</div>
兼容旧版本（
若使用较老版本 Layui，或需要更灵活的间距（如响应式 gap、非对称间隙），可手动覆盖 CSS：
- 给 row 添加自定义类（如
my-row-gap） - 通过负 margin 抵消父容器外边距，再给子列设置 padding 实现视觉间隙
示例 CSS：
.my-row-gap { margin: 0 -10px; }.my-row-gap .layui-col-xs* { padding: 0 10px; }
然后 HTML 中：
<div class="layui-row my-row-gap"><div class="layui-col-md4">内容</div>
<div class="layui-col-md4">内容</div>
</div>
注意事项
- 内置
layui-col-space-类只影响列之间的水平间距，不控制垂直间距（行间距需单独处理，如用margin-bottom） - 列宽仍遵循
layui-col-*-N规则（如layui-col-md6占一半），间隙是“挤”出来的，不影响列宽计算逻辑 - 响应式场景下，可组合多个 space 类，如
layui-col-space-sm-5 layui-col-space-md-10（需确认版本是否支持，目前仅 2.8.0+ 支持基础 space，响应式 space 尚未内置）
替代方案：用 flex + 自定义样式（更可控）
如果项目允许脱离纯 Layui 规范，可将 row 设为 flex，并用 gap：
<div class="layui-col-md4">A</div>
<div class="layui-col-md4">B</div>
</div>
注意：此时需确保子列不依赖 float 或传统栅格的 display 设置，建议配合 flex: 1 或固定 width 使用。
