網格佈局
mdui 提供了一套響應式、行動裝置優先的 12 欄網格版面配置系統。
版面配置容器
mdui 需要為頁面內容和網格版面配置系統包裹一個 .mdui-container 容器。我們提供了兩個用於此目的的類別。
.mdui-container 類別佔據 92% - 96% 的螢幕寬度，且最大寬度 1280px。
<body>
<div class="mdui-container">
...
</div>
</body>.mdui-container-fluid 類別將始終佔據 100% 的螢幕寬度。
<body>
<div class="mdui-container-fluid">
...
</div>
</body>基礎網格
.mdui-row 必須包含在 .mdui-container 或 .mdui-container-fluid 中，以便為其賦予合適的對齊（alignment）和內距（padding）。
在 .mdui-row 中包含若干個 .mdui-col-xs-[1-12] 類別，其中 .mdui-col-xs-[1-12] 中的數字表示該元素佔據多少欄。
如果一列中包含的欄大於 12，則多餘的欄將另起一列排列。
<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>
響應式網格
.mdui-col-xs-[1-12]所有螢幕裝置上都會生效，如手機、電腦等。.mdui-col-sm-[1-12]在小螢幕及以上的裝置上生效，如平板電腦。.mdui-col-md-[1-12]在中等螢幕及以上的裝置上生效，如筆記型電腦。.mdui-col-lg-[1-12]在大螢幕及以上的裝置上生效，如桌上型電腦。.mdui-col-xl-[1-12]在特大螢幕裝置上生效，如電視。
混用這些類別，可以達到響應式的效果。
響應式斷點如下：
| class | 區間 | 欄間距 |
|---|---|---|
.mdui-col-xs-[1-12] | > 0px | 16px（每欄左右均有 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 |
<!-- 在超小螢幕裝置上，第一欄 100% 寬度，第二欄 50% 寬度。在小螢幕及以上裝置上，第一欄為 66.6% 寬度，第二欄為 33.3% 寬度。 -->
<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>
<!-- 在超小螢幕裝置上每欄都是 50% 寬度，在小螢幕及以上裝置上每欄 33.3% 寬度。 -->
<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>
<!-- 在所有裝置上，每欄都是 50% 寬度。 -->
<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><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>欄偏移
使用 .mdui-col-offset-xs-[1-12]、.mdui-col-offset-sm-[1-12]、.mdui-col-offset-md-[1-12]、.mdui-col-offset-lg-[1-12] 和 .mdui-col-offset-xl-[1-12] 可以將欄向右偏移，類別名稱中的數字表示向右偏移多少欄。
<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><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>等分欄
在 .mdui-row-xs-[1-12] 中包含若干個含 .mdui-col 類別的元素，這些元素會被等分。例如：.mdui-row-xs-5 中的每一個 .mdui-col 元素均佔據 20% 的寬度。
<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>混用 .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] 可以實作響應式版面配置。