所以我试图构建一个react应用页面，在large或xl屏幕上，代码将在一行中显示所有9个框。在平板电脑屏幕上，布局将分为两行。在手机屏幕上，布局将被分成三行。我我已经走得很远，所有9个框显示在一排，并作出React，但他们在桌面版本的间距重叠，并在移动的版本只有一列出现时，它应该是一个3x3网格。我如何改变我的当前代码，以匹配这一点？
以下是我目前掌握的情况：

import { Box, Grid, Paper, Typography } from "@mui/material";
import { styled } from "@mui/material/styles";

const Contained = styled(Box)({
  backgroundColor: "rgba(241, 243, 246, 1)",
  fontFamily: "Roboto",
  height: "100vh",
  width: "100vw",
});

const Appbox = styled("div")({
  backgroundColor: "#fff",
  border: "1px solid #E4E9F2",
  borderRadius: "4px",
  color: "#64768C",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  padding: "16px",
  textAlign: "center",
  height: "92px",
  width: "133px",
  "&:hover": {
    boxShadow: "0px 3px 6px #00000029",
  },
});

const StatsNumber = styled(Typography)({
  fontSize: "32px",
  fontWeight: 600,
});

function ResponsiveGrid() {
  return (
    <Contained>
      <Typography
        align="left"
        variant="h1"
        sx={{ margin: "0px 32px 24px 32px", fontSize: "24px" }}
      >
        Dashboard
      </Typography>
      <Grid item xl = {18} xs={12}>
        <Paper sx={{ padding: "32px", height: "100%" }}>
          <Grid container spacing={2} sx={{flexWrap: 'wrap'}}>
            <Grid item xl={2} lg={2} md={4} sm={6} xs={12}>
              <Appbox>
                <StatsNumber>33</StatsNumber>
                <Typography>Text Here</Typography>
              </Appbox>
            </Grid>
            <Grid item xl={2} lg={2} md={4} sm={6} xs={12}>
              <Appbox>
                <StatsNumber>33</StatsNumber>
                <Typography>Text Here</Typography>
              </Appbox>
            </Grid>
            <Grid item xl={2} lg={2} md={4} sm={6} xs={12}>
              <Appbox>
                <StatsNumber>33</StatsNumber>
                <Typography>Text Here</Typography>
              </Appbox>
            </Grid>
            <Grid item xl={1} lg={2} md={4} sm={6} xs={12}>
              <Appbox>
                <StatsNumber>33</StatsNumber>
                <Typography>Text Here</Typography>
              </Appbox>
            </Grid>
            <Grid item xl={1} lg={2} md={4} sm={6} xs={12}>
              <Appbox>
                <StatsNumber>33</StatsNumber>
                <Typography>Text Here</Typography>
              </Appbox>
            </Grid>
            <Grid item xl={1} lg={2} md={4} sm={6} xs={12}>
              <Appbox>
                <StatsNumber>33</StatsNumber>
                <Typography>Text Here</Typography>
              </Appbox>
            </Grid>
            <Grid item xl={1} lg={2} md={4} sm={6} xs={12}>
              <Appbox>
                <StatsNumber>33</StatsNumber>
                <Typography>Text Here</Typography>
              </Appbox>
            </Grid>
            <Grid item xl={1} lg={2} md={4} sm={6} xs={12}>
              <Appbox>
                <StatsNumber>33</StatsNumber>
                <Typography>Text Here</Typography>
              </Appbox>
            </Grid>
            <Grid item xl={1} lg={2} md={4} sm={6} xs={12}>
              <Appbox>
                <StatsNumber>33</StatsNumber>
                <Typography>Text Here</Typography>
              </Appbox>
            </Grid>
            </Grid>
            </Paper>
            </Grid>
            </Contained>
  )}

  export default ResponsiveGrid