Closed2022/04/17にクローズ1

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

マテリアルデザイン

何について書くか？

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にクローズされました