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

概要

Material UIのGrid v2を使ってレスポンシブなサイトを実装するようなサンプルコード集となります。
コードの説明については、他の方が説明している記事のほうが分かりやすいかと思います。その記事をご参照ください。

バージョン

• React v19
• Material UI v6.4.3

サンプルコード1

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

プレビュー

サンプルコード2

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

プレビュー

サンプルコード3

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

プレビュー

参考・引用