グリッドレイアウト
mdui は、レスポンシブでモバイルファーストな 12 カラムのグリッドシステムを提供します。
レイアウトコンテナ
mdui では、ページコンテンツとグリッドシステムを .mdui-container コンテナで囲む必要があります。そのために 2 つのクラスを提供しています。
.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 は、適切な配置（alignment）とパディング（padding）を与えるために、.mdui-container または .mdui-container-fluid 内に含まれている必要があります。
.mdui-row 内には、いくつかの .mdui-col-xs-[1-12] クラスを含めます。.mdui-col-xs-[1-12] の数字は、その要素が占めるカラム数を表します。
1 行に含まれるカラムの合計が 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 |
<!-- 超小型スクリーンデバイスでは、第 1 カラムは幅 100%、第 2 カラムは幅 50% です。小型スクリーン以上のデバイスでは、第 1 カラムは幅 66.6%、第 2 カラムは幅 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>ネストされたカラム
既存のカラム内にさらに新しい .mdui-row と .mdui-col-[*] 要素を追加することで、カラムの入れ子（ネスト）を実現します。入れ子になった行に含まれるカラムは合計 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>等分割カラム
.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] を混用することで、レスポンシブなレイアウトを実現できます。