MUI Layout and Responsive Design

Grid v2

MUI v6 ships Grid v2 as default (imported from @mui/material/Grid). The size prop replaces the old xs/sm/md props. Grid v2 always uses CSS grid internally and no longer requires the item prop — every direct child of a container is a grid item.

Basic grid

import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';

<Grid container spacing={2}>
  <Grid size={12}>
    <Paper sx={{ p: 2 }}>Full width header</Paper>
  </Grid>
  <Grid size={{ xs: 12, md: 8 }}>