Mui Grid レイアウトのレスポンシブ対応方法

レスポンシブブレイクポイントの設定: Mui Grid では、ブレイクポイントと呼ばれる幾つかの画面サイズを定義することができます。これにより、異なる画面サイズに応じてレイアウトを調整することが可能です。以下は、ブレイクポイントの設定例です。

import { Grid, useMediaQuery, useTheme } from '@material-ui/core';
const MyComponent = () => {
  const theme = useTheme();
  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
  return (
    <Grid container>
      <Grid item xs={12} sm={6} md={4} lg={3}>
        {/* コンテンツ */}
      </Grid>
      {isSmallScreen && (
        <Grid item xs={12} sm={6} md={4} lg={3}>
          {/* 小さい画面のみ表示 */}
        </Grid>
      )}
    </Grid>
  );
};

上記の例では、useMediaQuery フックを使用して、画面サイズがスモールスクリーン（幅がsm以下）かどうかを判定しています。スモールスクリーンの場合、追加の Grid アイテムが表示されます。

オートレイアウト: Mui Grid では、オートレイアウトを使用して、柔軟なカラム配置を実現することもできます。以下は、オートレイアウトを使用した例です。

import { Grid } from '@material-ui/core';
const MyComponent = () => {
  return (
    <Grid container spacing={2}>
      <Grid item xs>
        {/* カラム1 */}
      </Grid>
      <Grid item xs>
        {/* カラム2 */}
      </Grid>
      <Grid item xs>
        {/* カラム3 */}
      </Grid>
    </Grid>
  );
};

上記の例では、xs プロパティを使用して、各カラムの幅を均等に設定しています。カラムの数に応じて自動的にレイアウトが調整されます。

オフセットと非表示: Mui Grid では、オフセットや非表示にするためのプロパティも利用できます。以下は、オフセットと非表示を組み合わせた例です。

import { Hidden, Grid } from '@material-ui/core';
const MyComponent = () => {
  return (
    <Grid container>
      <Grid item xs={12} md={6}>
        {/* カラム1 */}
      </Grid>
      <Grid item xs={12} md={6} lg={4} xl={3}>
        {/* カラム2 */}
      </Grid>
      <Hidden smDown>
        <Grid item md={6} lg={4} xl={3}>
          {/* レスポンシブブレイクポイント以上でのみ表示 */}
        </Grid>
      </Hidden>
    </Grid>
  );
};

上記の例では、Hidden コンポーネントを使用して、特定のブレイクポイント以上でのみ表示するように設定しています。

これらは、Mui Grid レイアウトのレスポンシブ対応の一部の例です。必要に応じて、他のプロパティやブレイクポイントを使用して、さまな方法を実現することもできます。Mui Grid の公式ドキュメントやチュートリアルも参考にすると良いでしょう。