はじめに <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 i…