<Grid container> と <Grid item> の基本

はじめに

<Grid>コンポーネントはMUIが提供する、グリッドレイアウトを実現するためのコンポーネントである。 <Grid container></Grid>を親要素、<Grid item></Grid>を子要素として指定することで、グリッドレイアウトを使用できる。

基本ルール

• <Grid container></Grid>の中に<Grid item></Grid>を入れる。
• アイテムの幅はxs, sm, md, lg, xlのようなbreakpointによって指定する。

具体例

<Grid container spacing={2} sx={{ padding: 2 }}>
    <Grid item xs={12} sm={6} md={4}>～</Grid>
    <Grid item xs={12} sm={6} md={4}>～</Grid>
    <Grid item xs={12} sm={12} md={4}>～</Grid>
</Grid>

• spacing を<Grid container>につけることで、子要素の間隔を調整できる。spacing={2}により、子要素間に2の間隔(8px×2=16px)を設定している。

• sx={{ padding: 2 }}は親要素全体に16pxの内側余白を設定している。

• xs={12}は、画面がxs(最小サイズ)以上であった時、1行全体の幅を取るよう指定。
• sm={6}は、画面がsm(smallサイズ)以上であった時、1行の半分の幅を取るよう指定。
• md={4}は、画面がmd(Mediumサイズ)以上であった時、1行の1/3の幅を取るよう指定。