layui.栅格化怎么使用

Layui 栅格化是一种基于栅格布局的响应式前端布局系统，可以快速构建适应不同屏幕尺寸的页面。下面是 Layui 栅格化的使用方法：

1. 在 HTML 页面中引入 layui.css 和 layui.js 文件。

2. 使用 layui 栅格化的 HTML 结构，例如：

<div class="layui-row">
  <div class="layui-col-md6">左侧内容</div>
  <div class="layui-col-md6">右侧内容</div>
</div>

其中，`.layui-row` 表示行，`.layui-col-md6` 表示列，`md6` 表示在中等屏幕尺寸下占用 6 个栅格。

3. 可以根据需要在列内嵌套其他元素，例如：

<div class="layui-row">
  <div class="layui-col-md6">
    <div class="layui-card">
      <div class="layui-card-header">标题</div>
      <div class="layui-card-body">内容</div>
    </div>
  </div>
  <div class="layui-col-md6">右侧内容</div>
</div>

4. 根据需要调整栅格占用比例，例如：

<div class="layui-row">
  <div class="layui-col-md4">左侧内容</div>
  <div class="layui-col-md8">右侧内容</div>
</div>

其中，`.layui-col-md4` 表示在中等屏幕尺寸下占用 4 个栅格，`.layui-col-md8` 表示占用 8 个栅格。

5. 可以根据需要在不同屏幕尺寸下调整栅格占用比例，例如：

<div class="layui-row">
  <div class="layui-col-xs12 layui-col-md6">左侧内容</div>
  <div class="layui-col-xs12 layui-col-md6">右侧内容</div>
</div>

其中，`.layui-col-xs12` 表示在小屏幕尺寸下占用全部 12 个栅格，`.layui-col-md6` 表示在中等屏幕尺寸下占用 6 个栅格。

6. 可以使用其他 CSS 类名来调整栅格的样式，例如：

<div class="layui-row">
  <div class="layui-col-md6 my-class">左侧内容</div>
  <div class="layui-col-md6">右侧内容</div>
</div>

其中，`.my-class` 是自定义的 CSS 类名。