1. grid layout rules
1.1 layui-row line is defined as: <div class = "layui-Row"> </ div>
1.2 layui-COL-MD * presupposition columns defined as: <div class = "layui-COL-MD9"> </ div> , defines a set of columns (column), and placed in rows (Row) inner .
Variables md represents the mark at different screen, the column can occur up to four different combinations simultaneously.
Namely: XS (ultra-small screen, such as mobile phones), SM (small screen, such as a tablet), md (Desktop middle of the screen), LG (large screen desktops)
1.3 Variable * represents the column occupied by 12 other fraction is optionally 1--12. If multiple columns "aliquot value" sum is equal to 12, it is just full rows. If it exceeds 12, the excess will be listed automatically start a new line.
2. Response rules
3. Responsive public class
4. layout container
4.1 into a grid with class = "layui-container" specific container, to fix the width of a small screen device in the above, so that the column controllable.
4.2 into a grid or other elements with class = "layui-fluid" container, the width is not fixed, but rather adapted to 100%.
The column spacing
By "column pitch" default class, to set the spacing between the columns. And a row of the left-most column does not appear from the left, the right-most column does not appear right margin. 12 different preset size of the margins.
Space-COL-layui X (the value of X may be: 1,3,5,8,10,12,15,18,20,22,28,30), X represents an interval between the columns of X PX.
Such as: <div class = "layui-row layui-col-space10"> </ div> represents the spacing between the columns 10