Zenn
Closed1

【Material-ui】Gridによるコンポーネントの分割

マテリアルデザイン
hirohiro

何について書くか？

  • material-uiのGridコンポーネントを使用して幅をコントロールする。

内容

  • 基本構造 GridコンテナーでGridアイテムを囲む
<Grid container>
  <Grid item></Grid>
  <Grid item></Grid>
  <Grid item></Grid>
</Grid>
  • 相対的にGridアイテムのwidthを変更することができる。12分割しているので12と入れれば100% となる。
  • 下記例の場合は1:10:1の割合である。
<Grid container>
  <Grid item xs={1}></Grid>
  <Grid item xs={10}></Grid>
  <Grid item xs={1}></Grid>
</Grid>
  • Gridアイテムの横幅の合計が12に満たない場合
  • 今回の場合6なので親要素の50％のサイズのGridアイテムとなり左寄せとなる。
<Grid container>
  <Grid item xs={6}></Grid>
</Grid>
  • 上記に追記（Grid container内）することで親要素50％のGridアイテムが中心に表示される。
<Grid container alignItems="center" justify="center">
  <Grid item xs={6}></Grid>
</Grid>
  • 今回は横幅をxsにて指定したがレスポンシブにする場合、4つのブレイクポイントを持った属性が準備されている。
sm: 600dp〜
md: 960dp〜
lg: 1280dp〜
xl: 1920dp〜

参考サイト

このスクラップは2022/04/17にクローズされました