1、划分layui区域

layui-container：layui框架的容器，作用类似于flex布局的容器。

<div class="layui-container">
    // 在网页上划分一个区域，该区域专门使用layui的布局模块
</div>

在layui框架中，任何行上方不允许存在浮动元素。

1.1、Layui的列元素

先使用class="layui-container"在网页上划分出一个区域，该区域专门使用layui的布局模块。
Layui框架中采用class="layui-row"去在layui的布局模块中新建一个行，然后使用layui-col这样的预设类来定义一组列(column)，并且放在行内。
layui-col的后面还需要跟上两组参数，具体格式如下：

layui-col-媒体类型+列所占的宽度比例：
媒体类型：分别是xs(超小屏幕，如手机)、sm(小屏幕，如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕)，以呈现更加灵活的布局。
列所占的宽度比例：代表的是该列所占用的12等分，可选值为1~12，如果多个列的“等分数值”总和等于12，则刚好满行排列，如果大于12，多余的将自动另起一行。

<div class="layui-container"> 
  <div class="layui-row">
    <div class="layui-col-md9">
      12份中占9份
  </div>
   <div class="layui-col-md3">
      12份中占3份
   </div>
  </div>
</div>

1.2、定义layui区域不同设备的列布局

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>开始使用 layui</title>
        <link rel="stylesheet" href="css/layui.css">
        <style type="text/css">
            .layui-container {
                height: 100vh;
                border: 1px solid #ccc;
            }
            .layui-row > div {
                height: 50px;
                line-height: 50px;
                background: slateblue;
            }
        </style>
    </head>

    <body>
        <script src="js/layui.js"></script>
        <div class="layui-container">
            <div class="layui-row">
                <!--中等桌面屏幕一行排列 | 平板屏幕两行排列-->
                <div class="layui-col-md3 layui-col-sm6">数据内容</div>
                <div class="layui-col-md3 layui-col-sm6">数据内容</div>
                <div class="layui-col-md3 layui-col-sm6">数据内容</div>
                <div class="layui-col-md3 layui-col-sm6">数据内容</div>
            </div>
        </div>
    </body>

</html>

大于等于992px时

中等桌面屏幕.png

小于992px

平板屏幕.png

1.3、layui容器区域内元素的显示类型的变化

元素的宽度，列数，显示类型等变化都是基于响应式网站设计理念而来，之所以UI框架加入这一特性，目的是为了能够使UI框架的适用范围更大。

显示为块元素：

layui-show-md-block

显示为行内元素：

layui-show-md-inline

显示为行内块元素：

layui-show-md-inline-block

元素消失：

layui-hide-md

1.4、layui-col-space列间距：容器区域内多列内容之间的间距设置

格式：
layui-col-space$ $为数字，代表每一列内容的间距，从本质上讲：这个间距是加在了每一个layui-col的左右内边距上的像素。

<div class="layui-container"> 
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md4">
      <div class='dem'>内容</div>
      </div>
      <div class="layui-col-md4">
      <div class='dem'>内容</div>
      </div>
      <div class="layui-col-md4">
      <div class='dem'>内容</div>
    </div>
  </div>
</div>

1.4、layui-col-屏幕类型-offset$：列偏移，Layui容器区域内的某一列向右偏移列数

格式：
ayui-col-屏幕类型-offset$$为数字，代表该列内容距离左边内容的偏移的列数
如果列宽+列偏移 > 12，那么自动换行，换到下一行的列如果具备偏移的性质，那么该偏移会依旧生效。

        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md4 ">数据内容</div>
                <div class="layui-col-md4 layui-col-md-offset4">偏移4</div>
            </div>
        </div>

结果.png

Layui框架：layui的格栅布局规则