import : 
import * as React from 'react';
import Grid from '@mui/material/Grid2';

config.layout.tsx : setting breakpoints
const theme = createTheme ({
      breakpoints : {
           values : {
                  xs : 0,
                  sm : 576,
                  md : 768,
                  lg : 992,
                  xl : 1200,
                  xxl : 1601,
            },
      },
});

component : basic
size=8
size=4

<Grid container spacing={2}>
      <Grid size= {8} >
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  size=8
            </Box>
      </Grid>
      <Grid size= {4} >
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  size=4
            </Box>
      </Grid>
</Grid>

component : Multiple Breakpoints
xs=6 md=8
xs=6 md=4

<Grid container spacing={2}>
      <Grid size={{xs: 6, md: 8 }} >
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  xs=6 md=8
            </Box>
      </Grid>
      <Grid size={{xs: 6, md: 4 }} >
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  xs=6 md=4
            </Box>
      </Grid>
</Grid>

component : row & column spacing / loop
size=6
size=6
size=6
size=6

<Grid container rowSpacing={{ xs: 1, sm: 2, md: 3}} spacing={{ xs: 1, sm: 2, md: 3}} >
      {Array.from(Array(4)).map((_, index)) => (
            <Grid key={index} size={6} >
                  <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                        size=6
                  </Box>
            </Grid>
      ))}
</Grid>

component : Auto-layout
size=grow
size=6
size=grow

<Grid container spacing={2}>
      <Grid size="grow">
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  size=grow
            </Box>
      </Grid>
      <Grid size= {6} >
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  size=6
            </Box>
      </Grid>
      <Grid size="grow">
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  size=grow
            </Box>
      </Grid>
</Grid>

component : width content
size=grow
size=6
size=grow

<Grid container spacing={2}>
      <Grid size="auto">
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  size=auto
            </Box>
      </Grid>
      <Grid size= {6} >
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  size=6
            </Box>
      </Grid>
      <Grid size="grow">
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  size=grow
            </Box>
      </Grid>
</Grid>

component : Offset
1
2
3
4

<Grid container spacing={2} sx={{flexGrow: 1}}>
      <Grid size={{xs: 6, md: 2}} offset={{xs: 3, md: 0}} >
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  1
            </Box>
      </Grid>
      <Grid size={{xs: 4, md: 2}} offset={{md: 'auto'}} >
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  2
            </Box>
      </Grid>
      <Grid size={{xs: 4, md: 2}} offset={{xs: 4, md: 0}} >
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  3
            </Box>
      </Grid>
      <Grid size={{xs: 'grow', md: 6}} offset={{md: 2}} >
            <Box sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }}>
                  4
            </Box>
      </Grid>
</Grid>