Some issues with `<Grid>`

[Industrial]

Hi.

I'm copying source code from a MUI project and I have:

        <Grid
          container
          rowSpacing={2}
          columnSpacing={2}
          sx={{
            marginTop: 0,
            width: '100%',
            marginLeft: 0,
          }}
        >
          <Grid
            xs={12}
            sx={{
              marginBottom: 1,
            }}
          >
            <Typography variant="h3">{title}</Typography>
          </Grid>
          <Grid xs={12} sm={6} lg={3}>
            <CounterCard count={listsCount} label="Lists" href="/lists" />
          </Grid>
          <Grid xs={12} sm={6} lg={3}>
            <CounterCard count={projectsCount} label="Projects" href="/projects" />
          </Grid>
          <Grid xs={12} sm={6} lg={3}>
            <CounterCard count={tagsCount} label="Tags" href="/tags" />
          </Grid>
          <Grid xs={12} sm={6} lg={3}>
            <CounterCard count={itemsCount} label="Items" href="/items" />
          </Grid>
        </Grid>

• If I remove the marginTop, width and marginLeft then it will be at -16px which will throw off the design/layout. This does not happen with MUI.
• The properties rowSpacing and columnSpacing do not add CSS properties to the output HTML/CSS, so all the columns/cards stick together.

[juanrgm]

Are you using @mui/material/Unstable_Grid2?

You aren't setting the item property in the Grid components.

https://stackblitz.com/edit/react-kqfhe6?file=demo.tsx

[Industrial]

Right, it works correctly now. Thanks!