Grid System
mdui provides a responsive, mobile-first 12-column grid system.
Related Reading
Layout Container
mdui requires a .mdui-container wrapper for page content and the grid system. We provide two classes for this purpose.
The .mdui-container class occupies 92% - 96% of the screen width, with a maximum width of 1280px.
<body>
<div class="mdui-container">
...
</div>
</body>The .mdui-container-fluid class will always occupy 100% of the screen width.
<body>
<div class="mdui-container-fluid">
...
</div>
</body>Basic Grid
.mdui-row must be included within a .mdui-container or .mdui-container-fluid to ensure proper alignment and padding.
Include several .mdui-col-xs-[1-12] classes within a .mdui-row. The numbers in the .mdui-col-xs-[1-12] class name indicate how many columns the element occupies.
If the total number of columns in a row exceeds 12, the extra columns will wrap to a new line.
<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]Takes effect on all screen devices, such as mobiles and computers..mdui-col-sm-[1-12]Takes effect on small screens and above, such as tablets..mdui-col-md-[1-12]Takes effect on medium screens and above, such as laptops..mdui-col-lg-[1-12]Takes effect on large screens and above, such as desktop computers..mdui-col-xl-[1-12]Takes effect on extra-large screens, such as televisions.
Mix these classes to achieve responsive layouts.
Responsive breakpoints are as follows:
| class | Range | Gutter Width |
|---|---|---|
.mdui-col-xs-[1-12] | > 0px | 16px (8px on each side of every column) |
.mdui-col-sm-[1-12] | > 600px | |
.mdui-col-md-[1-12] | > 1024px | |
.mdui-col-lg-[1-12] | > 1440px | |
.mdui-col-xl-[1-12] | > 1920px |
<!-- On extra-small screens, the first column is 100% wide and the second column is 50% wide. On small screens and above, the first column is 66.6% wide and the second column is 33.3% wide. -->
<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>
<!-- On extra-small screens, each column is 50% wide, and on small screens and above, each column is 33.3% wide. -->
<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>
<!-- On all devices, each column is 50% wide. -->
<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 Gutter
By default, there is a 16px gutter between columns. Simply add the .mdui-row-gapless class to .mdui-row to remove the gutter.
<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], and .mdui-col-offset-xl-[1-12] to offset columns to the right. The number in the class name indicates how many columns to offset.
<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 Columns
Implement column nesting by adding new .mdui-row and .mdui-col-[*] elements within existing columns. The number of columns in a nested row cannot exceed 12.
<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>Equal-width Columns
Include several elements with the .mdui-col class within .mdui-row-xs-[1-12], and these elements will be divided equally. For example, each .mdui-col element in .mdui-row-xs-5 will occupy 20% of the width.
<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], and .mdui-row-xl-[1-12] to achieve responsive layouts.
CSS Classes
| Class Name | Description |
|---|---|
.mdui-container | Layout container with width limits |
.mdui-container-fluid | 100% width layout container |
.mdui-row | Defines a row |
.mdui-col-[xs|sm|md|lg|xl]-[1-12] | Defines a column |
.mdui-row-gapless | Removes column gutters |
.mdui-col-offset-[xs|sm|md|lg|xl]-[1-12] | Column offset |
.mdui-row-[xs|sm|md|lg|xl]-[1-12] | Equal-width columns |