Layui grid system and background frame layout

One, Grid layout rules:

1.	Use Layui-row to define rows, such as:<div class= "Layui-row" ></div>
2.	A preset class such as layui-col-md* is used to define a set of columns (column), which is placed within the row (row). which The variable MD represents the tag under different screens (see below for optional values) The variable * represents the 12-like fraction (such as 6/12) used in the column, with an optional value of 1-12 If the sum of the "equal values" of multiple columns equals 12, the rows are arranged exactly. If it is greater than 12, the extra column will automatically start another row.
3.	The column can have up to four different combinations at the same time:XS(ultra small screen, such as mobile phone),SM(small screen, such as tablet),MD(Desktop medium screen),LG (Desktop large screen) to present a more dynamic and flexible layout.
4.	You can append a preset class like layui-col-space5, layui-col-md-offset3 to columns to define the spacing and offset of columns.
5.	Finally, fill the contents with any of your own elements in the column (columns) element and complete the layout!

Ii.. Response Rules:

The responsiveness of the grid, thanks to the strong support of the CSS3 Media query (Queries), for the four different sizes of screens, appropriate adaptation processing

	Ultra-small screen (Mobile <768px)	small Screen (flat ≥768px)	Medium Screen (Desktop ≥992px)	Large Screen (Desktop ≥1200px)
The value of the . Layui-container	Auto	750px	970px	1170px
Mark	Xs	Sm	Md	Lg
Column corresponding class * Equal value of 1-12	layui-col-xs*	layui-col-sm*	layui-col-md*	layui-col-lg*
Total number of columns	12
Response behavior	Always arranged horizontally at a set scale	Arranged horizontally below the current screen, stacked if the screen size is below the threshold

Third, the response of the public class:

class name	Description
Layui-show-*-block	Define the display:block under different devices; * Optional values are: XS, SM, MD, LG
Layui-show-*-inline	Define the display:inline under different devices; * Optional value Ibid.
Layui-show-*-inline-block	Define the display:inline-block under different devices; * Optional value Ibid.
layui-hide-*	Define the hidden classes under different devices, namely: Display:none; * Optional value Ibid.

Iv. layout Container:

Place the raster in a specific container with class= "Layui-container" to make the column controllable by fixing the width on the device above the small screen.

Five, column spacing:

Set the spacing between columns by using the preset class for column spacing. and the leftmost column in a row does not appear to the left margin, and the rightmost column does not appear to the right margin. The spacing of columns ensures that the layout is beautiful and the width of the column is fine. We use the common margins of the page, preset 12 different sizes of margins, respectively:
Layui-col-space1	Interval between columns 1px
Layui-col-space3	Interval between columns 3px
Layui-col-space5	Interval between columns 5px
Layui-col-space8	Interval between columns 8px
Layui-col-space10	Interval between columns 10px
Layui-col-space12	Interval between columns 12px
Layui-col-space15	Interval between columns 15px
Layui-col-space18	Interval between columns 18px
Layui-col-space20	Interval between columns 20px
Layui-col-space22	Interval between columns 22px
Layui-col-space28	Interval between columns 28px
Layui-col-space30	Interval between columns 30px

Six, column offset:

Append a preset class like layui-col-md-offset* to the column, which offsets the column to the right. Where the * number represents the number of columns that the offset occupies, it can be selected as 1-12.
such as:Layui-col-md-offset3, that is, under "Medium Desktop screen", let the column to the right offset 3 column width

Seven, grid nesting:

Theoretically, you can nest the rasters in an infinite hierarchy, which enhances the performance of the grid. The use of nesting is very simple. Nesting is done by inserting a row element (Layui-row) in the column element (layui-col-md*).

1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>HelloWorld</title>6<style type= "Text/css" >7 . b{8background-Color:pink;9     }Ten . b2{ Onebackground-Color:green; A     } -</style> - the<link rel= "stylesheet" href= "/layuitest/layui/css/layui.css" > -<body> -<divclass= "Layui-container" > - General layout (with medium screen desktop as an example): +<divclass= "Layui-row" > -<divclass= "LAYUI-COL-MD9" > +<divclass= "B" > Your content 9/12</div> A</div> at<divclass= "Layui-col-md3" > -<divclass= "B2" > Your content 3/12</div> -</div> -</div> -<divclass= "Layui-row" > -<divclass= "Layui-col-xs6 layui-col-sm6 layui-col-md4" > in<divclass= "B2" > Mobile: 6/12 | Flat Panel: 6/12 | Desktop:4/12</div> -</div> to<divclass= "Layui-col-xs6 layui-col-sm6 layui-col-md4" > +<divclass= "B" > Mobile: 6/12 | Flat Panel: 6/12 | Desktop: 4/12 </div> -</div> the<divclass= "Layui-col-xs4 layui-col-sm12 layui-col-md4" > *<divclass= "B2" > Mobile: 4/12 | Flat Panel: 12/12 | Desktop:4/12</div> $</div>Panax Notoginseng<divclass= "Layui-col-xs4 layui-col-sm7 layui-col-md8" > -<divclass= "B" > Mobile: 4/12 | Flat Panel: 7/12 | Desktop:8/12</div> the</div> +<divclass= "Layui-col-xs4 layui-col-sm5 layui-col-md4" > A<divclass= "B2" > Mobile: 4/12 | Flat Panel: 5/12 | Desktop: 4/12 </div> the</div> +</div> -<divclass= "Layui-row Layui-col-space10" > $<divclass= "LAYUI-COL-MD4" > $<divclass= "B" >1/3</div> -</div> -<divclass= "LAYUI-COL-MD4" > the<divclass= "B2" >1/3</div> -</div>Wuyi<divclass= "LAYUI-COL-MD4" > the<divclass= "B" >1/3</div> -</div> Wu</div> -<divclass= "Layui-row Layui-col-space5" > About<divclass= "LAYUI-COL-MD5" > $<divclass= "Layui-row Grid-demo" > -<divclass= "Layui-col-md3" > -<divclass= "B" > Internal column </div> -</div> A<divclass= "LAYUI-COL-MD9" > +<divclass= "B2" > Internal column </div> the</div> -<divclass= "Layui-col-md12" > $<divclass= "B" > Internal column </div> the</div> the</div> the</div> the<divclass= "Layui-col-md7" > -<divclass= "Layui-row Grid-demo grid-demo-bg1" > in<divclass= "Layui-col-md12" > the<divclass= "B2" > Internal column </div> the</div> About<divclass= "LAYUI-COL-MD9" > the<divclass= "B" > Internal column </div> the</div> the<divclass= "Layui-col-md3" > +<divclass= "B2" > Internal column </div> -</div> the</div>Bayi</div> the</div> the</div> -<script src= "/layuitest/layui/layui.js" ></script> -</body> thegrid system and background frame layout

 Layui grid system and background frame layout