CODEWITHSUNDEEP
javascriptreactjswebbootstrap-4material-ui
xAdvitya
xAdvitya

Reputation: 129

grid items in container not in rows

I used Container this caused all my grid items to be in columns not rows how can I fix it ?

enter image description here

link for project

Upvotes: 0

Views: 61

Answers (2)

Apostolos
Apostolos

Reputation: 10498

Use this setup and it should work (remove direction="row" and add container)

  <Grid
    container
    sx={{
      backgroundColor: "blue",
      width: "100%",
      marginLeft: 0
    }}
    justify="center"
    spacing={4}
  >
    <Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
      d
    </Grid>
    <Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
      e
    </Grid>
    <Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
      f
    </Grid>
    <Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
      g
    </Grid>
  </Grid>

demo

Upvotes: 1

MrPatel2021
MrPatel2021

Reputation: 221

You need to give property container to your parent grid. Your return looks like,

return (
    <Container>
      <Grid
        container
        direction="row"
        sx={{
          backgroundColor: "blue"
        }}
        justify="center"
        spacing={4}
      >
        <Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
          d
        </Grid>
        <Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
          e
        </Grid>
        <Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
          f
        </Grid>
        <Grid item xs={12} sm={4} sx={{ backgroundColor: "yellow" }}>
          g
        </Grid>
      </Grid>
    </Container>
  );

Upvotes: 1

Related Questions