為了豐富網頁布局簡化html/css**的耦合，並提公升多終端的適配能力，layui在2.0版本中引進了自己的一套具備響應式能力的柵格系統。我們將容器進行了12等分，預設了4*12種css排列類，它們在移動裝置、平板、電腦中/>大尺寸四種不同的螢幕下發揮著各自的作用。
一、柵格布局規則:
採用 layui-row 來定義行，如：
採用類似 layui-col-md* 這樣的預設類來定義一組列（column），且放在行（row）內。其中：
變數md 代表的是不同螢幕下的標記（可選值見下文）
變數* 代表的是該列所占用的12等分數（如6/12），可選值為 1 - 12
如果多個列的「等分數值」總和等於12，則剛好滿行排列。如果大於12，多餘的列將自動另起一行。
列可以同時出現最多四種不同的組合，分別是：xs（超小螢幕，如手機）、sm（小螢幕，如平板）、md（桌面中等螢幕）、lg（桌面大型螢幕），以呈現更加動態靈活的布局。
可對列追加類似 layui-col-space5、 layui-col-md-offset3 這樣的預設類來定義列的間距和偏移。
最後，在列（column）元素中放入你自己的任意元素填充內容，完成布局！
示例（這裡只是大致列舉兩個，更多例項請前往 示例-柵格 檢視）
1. 2. 常規布局（以中型螢幕桌面為例）：
3. 4. 5. 你的內容 9/12
6.
7. 8. 你的內容 3/12
9.
10.
12. 移動裝置、平板、桌面端的不同表現：
13. 14. 15. 移動：6/12 | 平板：6/12 | 桌面：4/12
16.
17. 18. 移動：6/12 | 平板：6/12 | 桌面：4/12
19.
20. 21. 移動：4/12 | 平板：12/12 | 桌面：4/12
22.
23. 24. 移動：4/12 | 平板：7/12 | 桌面：8/12
25.
26. 27. 移動：4/12 | 平板：5/12 | 桌面：4/12
28.
29.
30.
柵格的響應式能力，得益於css3**查詢（media queries）的強力支援，從而針對四類不同尺寸的螢幕，進行相應的適配處理
三、響應式公共類：
類名（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下面是乙個簡單的例子，列間距為10px：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個列寬度
下面是乙個採用「列偏移」機制讓兩個列左右對齊的例項
偏移4列，從而在最右
七、柵格巢狀：
理論上，你可以對柵格進行無窮層次的巢狀，這更加增強了柵格的表現能力。而巢狀的使用非常簡單。在列元素（layui-col-md*）中插入乙個行元素（layui-row），即可完成巢狀。下面是乙個簡單的例子：
內部列
內部列
內部列
內部列內部列
內部列
layui 之所以贏得如此多人的青睞，更多是在於它前後臺系統通吃的能力。既可編織出絢麗的前台頁面，又可滿足繁雜的後台功能需求。layui 致力於讓每一位開發者都能輕鬆搭建自己的後台。下面是 layui 提供的乙個現場的方案，你可以前往示例頁面，預覽後台布局效果
layui 後台布局
內容主體區域
layui柵格布局問題
在使用layer.open彈出到視窗中，使用布局一直不起作用。開始到寫法如下,目的是一行分成左右兩塊，比例為8 4等分。div class layui fluid div class layui row layui col space10 div class layui col md8 div cl...
CSS 後台布局例項
下面的例子是乙個簡單的布局 最上面是header，左邊是乙個logo 老男孩 右邊是使用者的登入資訊 中間一大塊是內容，內容左側是選單，右側是具體的內容 如下 body的margin為0，確保邊上全部填滿 absolute 確保位置不變 注意如果他的父級標籤有relative，他相對於這個父級標籤的...
layui柵格系統
首先，它是一種響應式的柵格系統，簡單說就是支援多種裝置，會自行改變行寬高。柵格的使用不需要js引入，單純的class樣式宣告。首先定義好頁面框架 class layui container div 其次layui定義的柵格為12等分，就是說一行被分成了12份，可以任意分割小於等於12列，但是必須滿足...