MUI の Grid コンポーネントを利用した、レスポンシブレイアウト作成方法を紹介します。MUI のレスポンシブレイアウトでは、画面を横方向に12分割(12列)して認識します。画面サイズに応じて 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 のレスポンシブレイアウトでは、画面を横方向に12分割で管理しており、「メイン領域」に8、「サイドメニュー」に4が割り当てられるため、これら二つの要素が画面幅いっぱいに配置されます。(折り返しなし)
一方で、画面幅が 900px 以下の場合、「メイン領域」と「サイドメニュー」が縦に並びます。これは、「メイン領域」の実装コード <Grid item xs={12} md={8}> の xs={12} が適用されているからです。MUI のレスポンシブレイアウトでは画面を 12 列で認識しており、「メイン領域」が 12 列全てを占有してしまうため、「サイドメニュー」は次の行に移動することになります。よって、「メイン領域」と「サイドメニュー」が縦に並ぶことになります。
サンプル
サンプルのダウンロードはこちらからどうぞ。