Search code examples
javascriptreactjsmaterial-uigrid

Specify Material UI's Grid item location

CSS grid layout has the grid-column property to specify grid item location (e.g. grid-column: 1 / 3)

I want to do the same using Material UI's Grid component, but it doesn't allow me to specify the certain starting and ending points, just the number of columns taken at all.

(e.g.

 <Grid container rowSpacing={1}>
  <Grid item xs={8}>
    Item 1
  </Grid>
  <Grid item xs={4}>
    Item 2
  </Grid>
</Grid>

For example, I want the first Item to be located from 2 to 4 column and the second Item to be located from 7 to 10 column. How do I do that in MUI v5?

Solution

  • The Grid component from Material UI has a misleading name. Their Grid component is not based on CSS Grid, It's actually CSS Flexbox with added features. So you wouldn't be able to use it like CSS Grid. You can just use CSS Grid and you won't have any conflicting issues.