一、柵格布局規則：
| 1. | 采用 layui-row 來定義行，如：<div class="layui-row"></div> |
| 2. | 采用類似 layui-col-md* 這樣的預設類來定義一組列（column），且放在行（row）內。其中：
|
| 3. | 列可以同時出現最多四種不同的組合，分別是：xs（超小屏幕，如手機）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈現更加動態靈活的布局。 |
| 4. | 可對列追加類似 layui-col-space5、 layui-col-md-offset3 這樣的預設類來定義列的間距和偏移。 |
| 5. | 最后，在列（column）元素中放入你自己的任意元素填充內容，完成布局！ |
二、響應式規則：
柵格的響應式能力，得益於CSS3媒體查詢（Media Queries）的強力支持，從而針對四類不同尺寸的屏幕，進行相應的適配處理
| 超小屏幕 (手機<768px) |
小屏幕 (平板≥768px) |
中等屏幕 (桌面≥992px) |
大型屏幕 (桌面≥1200px) |
|
|---|---|---|---|---|
| .layui-container的值 | auto | 750px | 970px | 1170px |
| 標記 | xs | sm | md | lg |
| 列對應類 * 為1-12的等分數值 |
layui-col-xs* | layui-col-sm* | layui-col-md* | layui-col-lg* |
| 總列數 | 12 | |||
| 響應行為 | 始終按設定的比例水平排列 | 在當前屏幕下水平排列，如果屏幕大小低於臨界值則堆疊排列 | ||
三、響應式公共類：
| 類名（class） | 說明 |
|---|---|
| layui-show-*-block | 定義不同設備下的 display: block; * 可選值有：xs、sm、md、lg |
| layui-show-*-inline | 定義不同設備下的 display: inline; * 可選值同上 |
| layui-show-*-inline-block | 定義不同設備下的 display: inline-block; * 可選值同上 |
| layui-hide-* | 定義不同設備下的隱藏類，即： display: none; * 可選值同上 |
四、布局容器：
將柵格放入一個帶有 class="layui-container" 的特定的容器中，以便在小屏幕以上的設備中固定寬度，讓列可控。
五、列間距：
| 通過“列間距”的預設類，來設定列之間的間距。且一行中最左的列不會出現左邊距，最右的列不會出現右邊距。列間距在保證排版美觀的同時，還可以進一步保證分列的寬度精細程度。我們結合網頁常用的邊距，預設了 12 種不同尺寸的邊距，分別是： | |
| layui-col-space1 | 列之間間隔 1px |
| layui-col-space3 | 列之間間隔 3px |
| layui-col-space5 | 列之間間隔 5px |
| layui-col-space8 | 列之間間隔 8px |
| layui-col-space10 | 列之間間隔 10px |
| layui-col-space12 | 列之間間隔 12px |
| layui-col-space15 | 列之間間隔 15px |
| layui-col-space18 | 列之間間隔 18px |
| layui-col-space20 | 列之間間隔 20px |
| layui-col-space22 | 列之間間隔 22px |
| layui-col-space28 | 列之間間隔 28px |
| layui-col-space30 | 列之間間隔 30px |
六、列偏移：
對列追加 類似 layui-col-md-offset* 的預設類，從而讓列向右偏移。其中 * 號代表的是偏移占據的列數，可選中為 1 - 12。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，讓該列向右偏移3個列寬度
七、柵格嵌套：
理論上，你可以對柵格進行無窮層次的嵌套，這更加增強了柵格的表現能力。而嵌套的使用非常簡單。在列元素（layui-col-md*）中插入一個行元素（layui-row），即可完成嵌套。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HelloWorld</title> 6 <style type="text/css"> 7 .b{ 8 background-color:pink; 9 } 10 .b2{ 11 background-color: green; 12 } 13 </style> 14 </head> 15 <link rel="stylesheet" href="/LayuiTest/layui/css/layui.css"> 16 <body> 17 <div class="layui-container"> 18 常規布局（以中型屏幕桌面為例）： 19 <div class="layui-row"> 20 <div class="layui-col-md9"> 21 <div class="b">你的內容 9/12</div> 22 </div> 23 <div class="layui-col-md3"> 24 <div class="b2">你的內容 3/12</div> 25 </div> 26 </div> 27 <div class="layui-row"> 28 <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 29 <div class="b2">移動：6/12 | 平板：6/12 | 桌面：4/12</div> 30 </div> 31 <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 32 <div class="b"> 移動：6/12 | 平板：6/12 | 桌面：4/12 </div> 33 </div> 34 <div class="layui-col-xs4 layui-col-sm12 layui-col-md4"> 35 <div class="b2">移動：4/12 | 平板：12/12 | 桌面：4/12</div> 36 </div> 37 <div class="layui-col-xs4 layui-col-sm7 layui-col-md8"> 38 <div class="b">移動：4/12 | 平板：7/12 | 桌面：8/12</div> 39 </div> 40 <div class="layui-col-xs4 layui-col-sm5 layui-col-md4"> 41 <div class="b2">移動：4/12 | 平板：5/12 | 桌面：4/12 </div> 42 </div> 43 </div> 44 <div class="layui-row layui-col-space10"> 45 <div class="layui-col-md4"> 46 <div class="b">1/3</div> 47 </div> 48 <div class="layui-col-md4"> 49 <div class="b2">1/3</div> 50 </div> 51 <div class="layui-col-md4"> 52 <div class="b">1/3</div> 53 </div> 54 </div> 55 <div class="layui-row layui-col-space5"> 56 <div class="layui-col-md5"> 57 <div class="layui-row grid-demo"> 58 <div class="layui-col-md3"> 59 <div class="b">內部列</div> 60 </div> 61 <div class="layui-col-md9"> 62 <div class="b2">內部列</div> 63 </div> 64 <div class="layui-col-md12"> 65 <div class="b">內部列</div> 66 </div> 67 </div> 68 </div> 69 <div class="layui-col-md7"> 70 <div class="layui-row grid-demo grid-demo-bg1"> 71 <div class="layui-col-md12"> 72 <div class="b2">內部列</div> 73 </div> 74 <div class="layui-col-md9"> 75 <div class="b">內部列</div> 76 </div> 77 <div class="layui-col-md3"> 78 <div class="b2">內部列</div> 79 </div> 80 </div> 81 </div> 82 </div> 83 </div> 84 <script src="/LayuiTest/layui/layui.js"></script> 85 </body> 86 </html>