CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
MeltingDog
MeltingDog

Reputation: 15488

React: how to get Material UI's grid spacing to work?

I am using Material UI's Grid (https://material-ui.com/api/grid) for my layout, however while the columns and rows are working fine, the spacing attribute doesn't seem to work.

I have imported Grid as such: import Grid from '@material-ui/core/Grid'

  <Grid container spacing={10}>
    <Grid item xs={12} sm={6}>
      CONTENT
    </Grid>
    <Grid item xs={12} sm={6}>
      CONTENT
    </Grid>
  </Grid>

But no padding appears.

Would anyone know how to I can include spacing in the grid?

Upvotes: 13

Views: 19529

Answers (6)

Chukwujiobi Canon
Chukwujiobi Canon

Reputation: 4089

There are two parts to the Grid layout: container and item. Item widths are set in percentages, so they're always fluid and sized relative to their container. Also, due to the nature of this layout, Items have padding to create the spacing between individual items. Once you understand this layout, you ought to always look out for these:

<Grid container spacing={10} columns={12}>
  <Grid item xs={12} sm={6}>
    CONTENT
  </Grid>
  <Grid item xs={12} sm={6}>
    CONTENT
  </Grid>
</Grid>

Now it becomes clear that on extra small (xs) screens, the Grid items will take the entire columns of the Grid and on small (sm) screens, they will take 6 of the available 12 columns.

Upvotes: 0

James Prentice
James Prentice

Reputation: 262

What would have made a lot more sense and removed the need for this question being asked is

<GridConatainer>
 <GridItem>
 </GridItem>
</GridContainer>

however they have opted for a harder to read and more confusing alternative:

<Grid container>
 <Grid item>
 </Grid>
</Grid>

Upvotes: 2

Peter Nordman
Peter Nordman

Reputation: 81

I ran into this issue when using the sx prop on the Grid components. Be sure to place any custom styling only on children of the Grid components.

Upvotes: 8

Hamza Khursheed
Hamza Khursheed

Reputation: 2929

For me problem was I was not using item for Grid items.

<Grid container spacing={3}>
    <Grid item xs={12}></Grid>
    <Grid item xs={12}></Grid>
</Grid>

Upvotes: 16

Raj Kumar
Raj Kumar

Reputation: 854

Grid spacing is applied as padding, when your using the xs or sm, there padding will overide the top one, so you will get the top bottom padding

Grid Padding

Upvotes: 2

Akber Iqbal
Akber Iqbal

Reputation: 15041

Just having Content inside the <Grid> wouldn't work, but if you put it in a <div> or a <Paper> you would get what you need...

relevant js:

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  grid: {
    textAlign: "center",
    color: theme.palette.text.secondary
  },
  span: {
    border: "1px solid pink",
    backgroundColor: "lightpink`"
  },
  span2: {
    border: "1px solid green",
    backgroundColor: "lightgreen"
  },
  span3: {
    border: "1px solid blue",
    backgroundColor: "lightblue"
  },
}));

const App = () => {
  var classes = useStyles();

  return (
    <div className={classes.root}>
      <Hello name="React" />
      <p>Start editing to see some magic happen :)</p>
      <br />
      <Grid container spacing={10}>
        <Grid item xs className={classes.grid}>
          <div className={classes.span}>CONTENT</div>
        </Grid>
        <Grid item xs className={classes.grid}>
          <div className={classes.span}>CONTENT</div>
        </Grid>
      </Grid>
      <hr />
      <Grid container spacing={8}>
        <Grid item xs className={classes.grid}>
          <div className={classes.span2}>CONTENT</div>
        </Grid>
        <Grid item xs className={classes.grid}>
          <div className={classes.span2}>CONTENT</div>
        </Grid>
      </Grid>
      <hr />
      <Grid container spacing={6}>
        <Grid item xs className={classes.grid}>
          <div className={classes.span3}>CONTENT</div>
        </Grid>
        <Grid item xs className={classes.grid}>
          <div className={classes.span3}>CONTENT</div>
        </Grid>
      </Grid>
    </div>
  );
};

example stackblitz here

Upvotes: 6

Related Questions