MUI の Grid コンポーネントを利用した、レスポンシブレイアウト作成方法を紹介します。MUI のレスポンシブレイアウトでは、画面を横方向に１２分割（１２列）して認識します。画面サイズに応じて Grid がどれくらいの比率で伸縮するのかを設定することで、レスポンシブレイアウトを実現することができます。
レスポンシブレイアウトの動作イメージ
↓ 横幅 900px 以上の場合・・・「メイン領域」と「サイドメニュー」が横並びになっています。
↓ 横幅 900px 未満の場合・・・「メイン領域」と「サイドメニュー」が縦並びになっています。
MUI のブレイクポイント
画面サイズに応じて適用されるブレイクポイントは、次の通りです。
- xs – 極小: 0px ～
- sm – 小: 600px ～
- md – 中: 900px ～
- lg – 大: 1200px ～
- xl – 特大: 1536px ～
container と item 属性
Grid のコンテナー要素には、container 属性を付与します。Grid の親要素になります。
Grid 内の子要素には、item 属性を付与します。
実装コード
下記に、Grid を利用したレスポンシブレイアウトの実装コードを示します。
<Grid container spacing={2}>
<Grid item xs={12} md={8}>
<Item>メイン領域</Item>
</Grid>
<Grid item xs={12} md={4}>
<Item>サイドメニュー</Item>
</Grid>
</Grid>
コードの解説
画面幅が 900px 以上の場合、画面中央に「メイン領域」が表示されます。また、画面右側に「サイドメニュー」が表示されます。これは、「メイン領域」の実装コード <Grid item xs={12} md={8}> の md={8} が適用されているからです。（md が適用されるのは、画面幅が 900px 以上の場合です。）「サイドメニュー」についても、実装コード <Grid item xs={12} md={4}> の md={4} が適用されています。MUI のレスポンシブレイアウトでは、画面を横方向に１２分割で管理しており、「メイン領域」に８、「サイドメニュー」に４が割り当てられるため、これら二つの要素が画面幅いっぱいに配置されます。（折り返しなし）
一方で、画面幅が 900px 以下の場合、「メイン領域」と「サイドメニュー」が縦に並びます。これは、「メイン領域」の実装コード <Grid item xs={12} md={8}> の xs={12} が適用されているからです。MUI のレスポンシブレイアウトでは画面を 12 列で認識しており、「メイン領域」が 12 列全てを占有してしまうため、「サイドメニュー」は次の行に移動することになります。よって、「メイン領域」と「サイドメニュー」が縦に並ぶことになります。
サンプル
サンプルのダウンロードはこちらからどうぞ。
