layui 没有“宫格布局”这一内置概念，其所谓宫格实为通过 layui-row 与 layui-col-xs* 等栅格类组合实现的响应式卡片排列；加 layui-col-xs4 仍挤成一排，是因为 xs 断点需配合总列数≤12（如3列×4=12）才自动等宽换行，若父容器未设 layui-container 或存在其他css干扰，则响应式失效。
直接说结论：layui 的「宫格布局」不是内置概念，它本质是用 layui-col-* 类配合 layui-row 实现的等宽、等高、可响应式排列的卡片容器组合——关键不在“宫格”叫法，而在如何让列在不同屏幕下自动换行、对齐、留白且不溢出。
为什么加了 layui-col-xs4 在手机上还是挤成一排？
这是最常踩的坑：Layui 的 xs 断点（layui-col-xs3），就会强行并排撑满屏幕，导致内容被压缩甚至文字折断。
- 真正起作用的是列数总和是否 ≤12，而不是单个类名带
xs就一定“适配手机” - 移动端建议统一用
layui-col-xs12+ 多行结构，或改用layui-col-xs6（每行最多 2 个）、layui-col-xs4（每行最多 3 个）并确保总和严格为 12 - 别依赖
layui-col-sm*或更高断点来“救”手机显示——它们在小屏下根本不起效
layui-fluid 和 layui-container 怎么选？
宫格卡片若要铺满整个视口宽度（比如后台首页的快捷入口区），必须用 layui-fluid；若需居中+固定最大宽度（如内容区宫格），选 layui-container。二者不能嵌套混用，否则 padding/margin 叠加错乱。
-
<div class="layui-fluid"><div class="layui-row">...</div></div>→ 全宽无边距，适合顶部导航栏下的功能宫格 -
<div class="layui-container"><div class="layui-row">...</div></div>→ 最大宽度 1140px（lg）/992px（md），适合正文区域内的业务卡片 - 漏掉
layui-row直接放layui-col-*，会导致 margin 负值失效，列间距丢失
卡片内容溢出、高度不一致怎么办？
Layui 默认不对列内内容做高度约束，宫格卡片容易因标题长短、图片尺寸差异导致参差不齐，视觉上就不是“宫格”了。
- 给卡片容器加
height: 100%不够，得配合display: flex; flex-direction: column+flex: 1填充主体区域 - 文字截断用
text-overflow: ellipsis时，必须同时设white-space: nowrap和overflow: hidden，且容器要有固定宽高 - 图片统一用
<img src="x" class="layui-img" style="max-width:90%">，避免拉伸变形 - 别用
layui-col-space*控制卡片间距——它只加左右 margin，上下空白靠 padding 单独调
触摸点击热区太小、iOS 长按弹窗干扰
宫格卡片常带点击跳转或弹窗操作，但 Layui 默认按钮/卡片区域太小，尤其在 iPhone 上手指点击易误判，且 iOS 会默认触发长按复制菜单。
- 卡片整体加
padding: 16px，内部按钮用layui-btn layui-btn-sm并额外设min-height: 42px - 全局加
document.body.style.webkitTouchCallout = 'none'禁用长按菜单（写在layui.use回调里） - 事件绑定优先用
click，但监听对象必须是卡片根元素（如<div class="layui-col-xs4">），不要只绑在内部按钮上 <li>避免在卡片里嵌套 <code>layui-btn再套span，层级过深会增加点击穿透风险
宫格布局真正的难点不在栅格类名怎么写，而在于内容高度一致性、触摸反馈容错率、以及不同断点间卡片密度的平衡——这些没法靠一个 class 解决，得结合 CSS 弹性布局和少量 JS 修正。尤其是 layui-col-xs* 在窄屏下的实际渲染效果，必须真机调试，模拟器经常不准。
