【React】MUIのGrid2を使ったレスポンシブ対応のサンプルコード

# 概要
[Material UI](https://mui.com/?srsltid=AfmBOoqCCNMHVz6HPA9oDKq6BUFGHREkZKI-tKEHd-6YTIcxR2PA-Rnh)のGrid v2を使ってレスポンシブなサイトを実装するようなサンプルコード集となります。
コードの説明については、他の方が説明している記事のほうが分かりやすいかと思います。その記事をご参照ください。

# バージョン
- React v19
- Material UI v6.4.3

# サンプルコード1
```javaScript
import { Box, Grid2 as Grid } from '@mui/material'
import React from 'react'

const page = () => {
  return (
    <>
      <Grid container spacing={1} sx={{ width: '90%' , margin: "12px auto" ,textAlign: 'center'}}>
        <Grid size={12}>
          <Box sx={{ bgcolor: 'primary.main'}}>Item1</Box>
        </Grid>
        <Grid size={12}>
          <Box sx={{ bgcolor: 'secondary.main'}}>Item2</Box>
        </Grid>
        <Grid size={{ xs: 12, md: 6}}>
          <Box sx={{ bgcolor: 'error.main'}}>Item3</Box>
        </Grid>
        <Grid size={{ xs: 12, md: 6}}>
          <Box sx={{ bgcolor: 'warning.main'}}>Item4</Box>
        </Grid>
      </Grid>
    </>
  )
}

export default page
```
### プレビュー
![Grid Sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4017964/c9878321-f5ed-4bbe-8140-392939969731.gif)

# サンプルコード2
```javaScript
import { Box, Grid2 as Grid } from '@mui/material'
import React from 'react'

const page = () => {
  return (
    <>
      <Grid container direction="column">
        {/* header */}
        <Grid size={12}>
          <Box sx={{ bgcolor: 'primary.main'}}>Header</Box>
        </Grid>

        {/* body */}
        <Grid container >
          <Grid size={{ xs: 12, md: 8}} sx={{ height: "100%"}}>
            <Box sx={{ bgcolor: 'secondary.main', height:"300px"}}>Item1</Box>
          </Grid>
          <Grid size={{ xs: 12, md: 4}}>
            <Box sx={{ bgcolor: 'error.main', height:"300px"}}>Item2</Box>
          </Grid>
        </Grid>

        {/* footer */}
        <Grid size={12}>
          <Box sx={{ bgcolor: 'warning.main'}}>Footer</Box>
        </Grid>
      </Grid>
    </>
  )
}

export default page
```
### プレビュー
![GridSample ‐ Clipchampで作成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4017964/b6d77c95-783e-4707-a823-008e490aebc7.gif)

# サンプルコード3
```javaScript
import { Box, Button, Grid2 as Grid, TextField } from '@mui/material'
import React from 'react'

const page = () => {
  return (
    <>
      <Grid container sx={{ alignItems: "center", justifyContent: "center", height: "100vh" }}>
        <Grid sx={{ width: "90%", maxWidth: "600px" }}>

          {/* 入力フォーム本体 */}
          <Box sx={{ fontSize: "24px", fontWeight: "bold" }}>ログイン</Box>
          <form>
            <Grid size={12}>
              <TextField fullWidth type="email" label="メールアドレス" sx={{ marginTop: "20px" }} />
            </Grid>
            <Grid size={12}>
              <TextField fullWidth type="password" label="パスワード" sx={{ marginTop: "20px" }} />
            </Grid>

            {/* ボタン */}
            <Grid container spacing={2} sx={{ marginTop: "20px", justifyContent: "center" }}>
              <Grid size={{ xs: 12, md: 3 }}>
                <Button fullWidth variant="contained" type='submit'>ログイン</Button>
              </Grid>
              <Grid size={{ xs: 12, md: 3 }}>
                <Button fullWidth variant="outlined">サインアップ</Button>
              </Grid>
            </Grid>
          </form>

        </Grid>
      </Grid>
    </>
  )
}

export default page
```
### プレビュー
![無題の動画 ‐ Clipchampで作成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4017964/e19ecffc-d831-4d1c-9006-ddd65472a657.gif)


# 参考・引用
https://mui.com/material-ui/react-grid2/?srsltid=AfmBOopZLZZVQQuw_OYDMGTak_mYRUzRSlPle1fD6nqsBPIOu4FwEiwd

https://mui.com/material-ui/react-text-field/

https://qiita.com/E_MM/items/6c845db32f05cfa57f4a

https://qiita.com/araarara/items/aade564f48d215885237

https://qiita.com/kobayashimakoto/items/3c7102e878a7f8ef6a66