三、布局系统与栅格
LayUI 提供了灵活实用的布局系统，帮助开发者快速搭建页面结构。它主要包括响应式容器和强大的栅格系统。
3.1 容器
在开始布局之前，需要一个容器来包裹内容。LayUI 提供了两种容器：
固定宽度容器 layui-container：在大屏幕（≥1200px）下宽度固定为 1170px，在平板和手机端自动适配，通常用于官网、文章展示页。
自适应宽度容器 layui-fluid：宽度始终为屏幕宽度的 100%，通常用于后台管理系统的主内容区域。
<!-- 固定宽度容器 -->
<div class="layui-container">
内容区域
</div>
<!-- 全屏宽度容器 -->
<div class="layui-fluid">
内容区域
</div>
3.2 栅格系统
LayUI 的栅格系统采用传统的 12 等分 布局，通过行（layui-row）和列（layui-col-*）的组合来创建页面布局。
3.2.1 基础栅格
<div class="layui-container">
<div class="layui-row">
<!-- 占用 6/12 即 50% 宽度 -->
<div class="layui-col-md6">
左侧内容
</div>
<!-- 占用 6/12 即 50% 宽度 -->
<div class="layui-col-md6">
右侧内容
</div>
</div>
</div>
3.2.2 响应式支持
LayUI 栅格支持四种设备宽度，通过不同的后缀来控制不同屏幕下的显示比例：
示例：手机全屏显示，平板及以上显示两列
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6">
在手机上占满整行，平板上占一半
</div>
<div class="layui-col-xs12 layui-col-sm6">
在手机上占满整行，平板上占一半
</div>
</div>
更复杂的响应式示例：手机 1 列，平板 2 列，桌面 3 列
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
商品卡片 1
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
商品卡片 2
</div>
<!-- 更多卡片... -->
</div>
3.2.3 列偏移
使用 layui-col-md-offset* 可以在右侧产生空白偏移，实现内容的水平居中或错落布局。
<!-- 水平居中 -->
<div class="layui-row">
<!-- 向左偏移 4 个栅格，再占据 4 个栅格，实现水平居中 -->
<div class="layui-col-md4 layui-col-md-offset4">
居中的内容
</div>
</div>
3.2.4 列间距
使用 layui-col-space* 设置列与列之间的间距，支持 1-30px。由于栅格采用内边距实现间距，如果列有背景色，通常需要在内部再嵌套一个元素来显示背景。
<!-- 间距为 20px 的卡片网格 -->
<div class="layui-row layui-col-space20">
<div class="layui-col-md6">
<!-- 此处需要嵌套 div 来显示背景或边框 -->
<div style="background-color: #f8f8f8; padding: 15px;">
卡片内容 1
</div>
</div>
<div class="layui-col-md6">
<div style="background-color: #f8f8f8; padding: 15px;">
卡片内容 2
</div>
</div>
</div>
