記事内に広告が含まれています。

React MUI: Grid によるレスポンシブレイアウト(サンプルあり)

2022年5月5日

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 列全てを占有してしまうため、「サイドメニュー」は次の行に移動することになります。よって、「メイン領域」と「サイドメニュー」が縦に並ぶことになります。

サンプル

サンプルのダウンロードはこちらからどうぞ。

参考情報

https://mui.com/material-ui/react-grid/

-MUI, React, プログラミング