Layout container
MDUI needs to wrap a page content and grid layout system.mdui-container container. We provide two classes for this purpose.
.mdui-containerThe class occupies 92%-96% of the screen width, and the maximum width is 1280px.
<body>
<div class="mdui-container">
...
</div>
</body>
.mdui-container-fluid The class will always occupy 100% of the screen width.
<body>
<div class="mdui-container-fluid">
...
</div>
</body>
Base grid
.mdui-row Must be included in .mdui-conorainer or .mdui-containerIn order to give it the appropriate arrangement (aligment) and padding (padding).）和内补（padding）。
in .mdui-row Contains several .mdui-col-xs-[1-12] Class, where .mdui-col-xs-[1-12] The number in indicates how many columns the element occupies.
If a row contains more than 12 columns, the extra columns will be arranged in another row.
Example
<div class="mdui-row">
<div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>
Responsive grid
.mdui-col-xs-[1-12] It will take effect on all screen devices, such as mobile phones, computers, etc..mdui-col-sm-[1-12] It works on devices with small screens and above, such as tablets..mdui-col-md-[1-12] It works on devices with medium screens and above, such as laptops..mdui-col-lg-[1-12] It works on devices with large screens and above, such as desktop computers..mdui-col-xl-[1-12] It works on extra-large screen devices, such as TVs.
Mixing these types can achieve a responsive effect.
Responsive breakpoints are as follows:
| class |
Interval |
Slot width |
.mdui-col-xs-[1-12] |
> 0 |
16px (left and right in each column 8px） |
.mdui-col-sm-[1-12] |
> 600px |
.mdui-col-md-[1-12] |
> 1024px |
.mdui-col-lg-[1-12] |
> 1440px |
.mdui-col-xl-[1-12] |
> 1920px |
Example
.mdui-col-xs-12
.mdui-col-sm-8
.mdui-col-xs-6
.mdui-col-sm-4
.mdui-col-xs-6
.mdui-col-sm-4
.mdui-col-xs-6
.mdui-col-sm-4
.mdui-col-xs-6
.mdui-col-sm-4
.mdui-col-xs-6
.mdui-col-xs-6
<div class="mdui-row">
<div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
Column spacing
By default, there will be a 16px space between the columns. Just place .mdui-row Add class .mdui-row-gapless You can eliminate the column spacing.
Example
mdui-col-xs-4
mdui-col-xs-4
mdui-col-xs-4
<div class="mdui-row mdui-row-gapless">
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>
Column offset
use .mdui-col-offset-xs-[1-12]、.mdui-col-offset-sm-[1-12] 、 .mdui-col-offset-md-[1-12] 、 .mdui-col-offset-lg-[1-12] with .mdui-col-offset-xl-[1-12] You can shift the column to the right, and the number in the class name indicates how many columns to shift to the right.
Example
.mdui-col-md-4
.mdui-col-md-4 .mdui-col-offset-md-4
.mdui-col-md-3
.mdui-col-offset-md-3
.mdui-col-md-3
.mdui-col-offset-md-3
.mdui-col-md-6
.mdui-col-offset-md-3
<div class="mdui-row">
<div class="mdui-col-md-4">.mdui-col-md-4</div>
<div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>
Nested column
By adding new ones to the existing columns .mdui-row with .mdui-col-[*] The elements implement the nesting of columns. The nested row cannot contain more than 12 columns.
Example
Level 1: .col-xs-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="mdui-row">
<div class="mdui-col-xs-9">
Level 1: .col-xs-9
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
<div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
</div>
</div>
</div>
Equally divided sequence
in .mdui-row-xs-[1-12] Contains several .mdui-col The elements of the class, these elements will be divided equally. E.g:.mdui-row-xs-5 Each of .mdui-col The elements all occupy 20% of the width.
Example
<div class="mdui-row-xs-5">
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
</div>
Mix .mdui-row-xs-[1-12]、.mdui-row-sm-[1-12]、.mdui-row-md-[1-12]、.mdui-row-lg-[1-12]、.mdui-row-xl-[1-12] Responsive layout can be achieved.
List of CSS class names
| Class name |
effect |
.mdui-container |
Layout container with limited width |
.mdui-container-fluid |
100% width layout container |
.mdui-row |
Definition line |
.mdui-col-[xs|sm|md|lg|xl]-[1-12] |
Define column |
.mdui-row-gapless |
Eliminate column spacing |
.mdui-col-offset-[xs|sm|md|lg|xl]-[1-12] |
Column offset |
.mdui-row-[xs|sm|md|lg|xl]-[1-12] |
Equally divided sequence |