- 预览
- 查看代码
- 帮助

> 注意：下述演示中的颜色只是做一个区分作用，并非栅格内置。

始终等比例水平排列
6/12
6/12
3/12
3/12
3/12
3/12
移动设备、桌面端的组合响应式展现
移动：12/12、桌面：8/12
移动：6/12、桌面：4/12
移动：6/12、桌面：12/12
移动设备、平板、桌面端的复杂组合响应式展现
移动：6/12 | 平板：6/12 | 桌面：4/12
移动：6/12 | 平板：6/12 | 桌面：4/12
移动：4/12 | 平板：12/12 | 桌面：4/12
移动：4/12 | 平板：7/12 | 桌面：8/12
移动：4/12 | 平板：5/12 | 桌面：4/12
常规布局：从小屏幕堆叠到桌面水平排列
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
75%
25%
33.33%
33.33%
33.33%
50%
50%
列间隔
1/4
1/4
1/4
1/4
1/3
1/3
1/3
9/12
3/12
7/12
5/12
7/12
5/12
列偏移
4/12
偏移4列
偏移5列
不偏移
偏移3列
偏移1列
栅格嵌套
内部列
内部列
内部列
内部列
内部列
内部列
流体容器（宽度自适应，不固定）
25%
25%
25%
25%

> 更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>镜像站@Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all"> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> </head>

相关
栅格布局文档