Layui栅格系统默认不自动断行和适配移动端，需手动添加断点类名；必须用layui-row包裹layui-col，且类名如layui-col-md6中的md表示≥992px生效，小于此宽度则垂直堆叠。

Layui 的栅格系统（layui-row / layui-col）本身是响应式的，但**默认不自动断行、不自动适配移动端尺寸**，需要你主动设置类名来触发不同屏幕下的列宽与换行行为。

基础结构：必须用 layui-row 包裹 layui-col

栅格布局的容器必须是 layui-row，内部子元素必须是 layui-col，否则样式不生效：

<div class="layui-row">
  <div class="layui-col-md6">左边半宽</div>
  <div class="layui-col-md6">右边半宽</div>
</div>

注意：layui-col-md6 中的 md 表示「中等屏幕及以上（≥992px）」才生效，小于该宽度时列会垂直堆叠（即单列显示）。

响应式断点与类名规则

Layui 定义了 5 个断点，对应不同屏幕宽度下生效的列宽：

• xs：超小屏（layui-col-xs*
• sm：小屏（≥768px），如平板横屏 —— 用 layui-col-sm*
• md：中屏（≥992px），如小桌面 —— 用 layui-col-md*
• lg：大屏（≥1200px），如标准桌面 —— 用 layui-col-lg*
• xl：超大屏（≥1920px）—— 用 layui-col-xl*

每列总和建议为 12（类似 Bootstrap），例如：layui-col-md4 + layui-col-md8 = 12，填满一行。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

让小屏也保持多列并排（关键技巧）

默认情况下，不写任何 xs/sm 类，小屏就会堆叠成一列。若想「手机上也两列并排」，需显式声明：

<div class="layui-row">
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">A</div>
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">B</div>
  <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">C（小屏占满，中屏占1/3）</div>
</div>

这样在手机（xs）下 A/B 各占一半，C 占满一行；在桌面（md）下三列等宽。

自动换行与间隙控制

默认 layui-row 有负 margin，layui-col 有左右 padding（15px），形成间隔。如需去间隙：

• 加 layui-row layui-row-nobg 可移除行内负边距（慎用，可能破坏对齐）
• 更推荐给列加 layui-col-space* （如 layui-col-space10）统一设列间距，支持 0~30px（步进 2）
• 若某列需独占一行，加 layui-col-xs12 即可（小屏下强制换行）

注意：Layui 栅格不支持「自动换行」（flex-wrap: wrap），所有列必须手动控制是否换行，靠 xs12/sm12 等类模拟。