栅格系统

栅格系统
layui栅格系统将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

栅格布局规则
响应式规则
响应式公共类
布局容器
列间距
列偏移
栅格嵌套

一、栅格布局规则


1.	采用 layui-row 来定义行，如：`<div class="layui-row"></div>`
2.	采用 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md 代表的是不同屏幕下的标记 ; 变量*代表的是该列所占用的12等分数,如6/12,可选值为1-12 ; 如果多个列的“等分数值”总和等于12，则刚好满行排列,如果大于12，多余的列将自动另起一行
3.	列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）
4.	对列追加 layui-col-space5、 layui-col-md-offset3 预设类来定义列的间距和偏移
5.	最后，在列（column）元素中放入自己的任意元素填充内容，完成布局

效果图:
四等分效果图

 <div class="layui-row">
    <div class="layui-col-xs3">
      <div class="grid-demo grid-demo-bg1">3/12</div>
    </div>
    <div class="layui-col-xs3">
      <div class="grid-demo">3/12</div>
    </div>
    <div class="layui-col-xs3">
      <div class="grid-demo grid-demo-bg1">3/12</div>
    </div>
    <div class="layui-col-xs3">
      <div class="grid-demo">3/12</div>
    </div>
  </div>

二、响应式规则

1.写法:

layui-col-xs12	layui-col-sm6	layui-col-md3	layui-col-lg4

2.栅格的响应式能力，可以针对四类不同尺寸的屏幕(手机-xs,平板-sm,中等桌面-md,超大桌面-lg)，进行相应的适配处理
3.行等分: 一行12列

三、响应式公共类

类名（class）	说明
layui-show-*-block	定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg
layui-show-*-inline	定义不同设备下的 display: inline; * 可选值有：xs、sm、md、lg
layui-show-*-inline-block	定义不同设备下的 display: inline-block; * 可选值有：xs、sm、md、lg
layui-hide-*	定义不同设备下的隐藏类，即： display: none; * 可选值同上

四、布局容器

1.将栅格放入一个带有 class=“layui-container” 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-xs12">
      ...
    </div>
  </div>
</div>

2.还可以不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应

<div class="layui-fluid">
    ...
</div>

五、列间距

“列间距”的预设类:有12种 1,3,5,8,10,12,15,18,20,22,28,30
说明:一行中最左的列不会出现左边距，最右的列不会出现右边距

样式	说明
layui-col-space3	列之间间隔 3px

 <div class="layui-row layui-col-space1">
    <div class="layui-col-md6">
      <div class="grid-demo grid-demo-bg1">左1</div>
    </div>
    <!--中间有一条美观的缝隙,缝隙大小为1像素-->
    <div class="layui-col-md6">
      <div class="grid-demo grid-demo-bg1">右2</div>
    </div>
  </div>

六、列偏移

对列追加 layui-col-md-offset* 的预设类，可以让列向右偏移。其中 * 号代表的是偏移占据的列数，可选值为 1 - 12。
如：layui-col-xs-offset3，即代表在“手机显示屏幕”下，让该列向右偏移3个列宽度。

<div class="layui-row">
  <div class="layui-col-md4">
    此栅格占用3分之1的大小
  </div>
  <div class="layui-col-md4 layui-col-md-offset4">
    偏移4列，从而在最右
  </div>
</div>

注意:
第二个div虽然占用4份,想要偏移到同一行的最右侧,值为: layui-col-md-offset4 而不是layui-col-md-offset3
效果图:
偏移至最右侧,值为4
偏移值为3

来源：CSDN

作者：@Malachi

链接：https://blog.csdn.net/taiyangwojiu/article/details/103485055

标签

栅格系统