Page elements

layout

Layout container

Fixed width

Place the grid in a specific container with class = "layeui container" so that the width is fixed in devices above the small screen and the columns are controllable.

<div class="layui-container">
  <div class="layui-row">
    ......
  </div>
</div>   

Full width

The container width may not be fixed. Put the grid or other elements in a container with class = "layui fluid", the width will not be fixed, but 100% adapted

<div class="layui-fluid">
  ......
</div> 

grid system

In order to enrich the layout of web pages, simplify the coupling of HTML/CSS codes, and improve the adaptability of multiple terminals, layui introduces a grid system with responsive ability. The container is divided into 12 equal parts, and 4 * 12 CSS arrangement classes are preset, which play their respective roles under four different screens: mobile device, tablet, desktop / large size.

Grid layout rules

1. Columns can appear in up to four different combinations at the same time, namely: xs (ultra small screen, such as mobile phone), sm (small screen, such as tablet), md (desktop medium screen), lg (desktop large screen).
2. You can append preset classes like layui col space5 and layui col MD offset3 to columns to define the spacing and offset of columns.
3. You can put any of your own elements in the column element to fill the content

Example:

<h3>General layout (for example, medium screen desktop):</h3>
<div class="layui-row">
    <div class="layui-col-md9" style="background-color: #00F7DE;">
      Your content 9 / 12
    </div>
    <div class="layui-col-md3" style="background-color: rosybrown;">
      Your content 3 / 12
    </div>
</div>

Responsive rule

The responsive ability of the grid, thanks to the strong support of CSS3 Media Queries, can be adapted to four different sizes of screens.

<h3>Different performance of tablet and desktop:</h3>
<div class="layui-row">
    <div class="layui-col-sm6 layui-col-md4"  
         style="background-color: thistle">
        //Flat plate ≥ 768px: 6 / 12 | desktop ≥ 992px: 4 / 12
    </div>
</div>

<div class="layui-row">        
    <div class="layui-col-sm4 layui-col-md6"  
         style="background-color: mediumaquamarine;">
        //Flat plate ≥ 768px: 4 / 12 | desktop ≥ 992px: 6 / 12
    </div>
</div>

<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md8" 
         style="background-color: coral">
        //Flat plate ≥ 768px: 12 / 12 | desktop ≥ 992px: 8 / 12
    </div>
</div>

Column margin

Use the preset class for column spacing to set the spacing between columns. And the leftmost column in a row will not have a left margin, and the rightmost column will not have a right margin. Column spacing can not only ensure the beautiful layout, but also further ensure the fineness of column width. We preset 12 different sizes of margins based on the commonly used margins of web pages, which are:

/* Support all double number intervals of 1px-30px interval between columns, and odd number intervals of 1px, 5px, 15px, 25px */
layui-col-space1 
layui-col-space2 
layui-col-space4 
layui-col-space5 
layui-col-space6 
layui-col-space8 
layui-col-space10 
layui-col-space12 
layui-col-space14 
layui-col-space15 
layui-col-space16 
layui-col-space18 
layui-col-space20 
layui-col-space22 
layui-col-space24 
layui-col-space25 
layui-col-space26 
layui-col-space28 
layui-col-space30

Example:

<h3>Column spacing</h3>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md4" >
        <!-- Need to be in layui-col-md4 One more layer inside div -->
        <div style="background-color: #009688;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: burlywood;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: silver;">
            1/3
        </div>
    </div>
</div>

Note:

 1. Layui col space: it doesn't work after setting, mainly because * * sets padding * *, that is to say * * shrinks inward * *, so setting the background color padding will add color, as if there is no space. You can add a div in it to achieve the goal.
 2. The spacing is generally no more than 30px. If it is more than 30, column offset is recommended.

Column offset

Append a default class like layui col MD offset * to the column to offset it to the right. Where * represents the number of columns occupied by the offset, which can be selected as 1 - 12.
For example: lay UI col MD offset 3, which means that the column is offset by 3 columns to the right under "medium desktop screen"

<h3>Column offset</h3>
<div class="layui-row">
    <div class="layui-col-md4" style="background-color: rosybrown;">
        4/12
    </div>
    <div class="layui-col-md4 layui-col-md-offset4" 
         style="background-color: cornflowerblue;">
        //Offset 4 columns to the right most
    </div>
</div>

Note: column offset can be set according to different screen standards. It is valid under the currently set screen. When it is lower than the specified threshold value of desktop screen, it will be stacked.

Column nesting

You can nest grids in infinite layers. Insert row element (layui row) in column element (layui col MD *) to complete nesting.

<h3>Column nesting</h3>
<div class="layui-row layui-col-space5">
    <div class="layui-col-md5" style="background-color: thistle;">
        <div class="layui-row">
            <div class="layui-col-md3" style="background-color: burlywood;" >
                //Inner column
            </div>
            <div class="layui-col-md5" style="background-color: indianred;">
                //Inner column
            </div>
            <div class="layui-col-md4" style="background-color: mediumaquamarine;">
                //Inner column
            </div>
        </div>
    </div>
</div>

Add VX to understand Click me to scan the code to get it