0

How is this possible in MUI4 Grid? If it's impossible in MUI, how about CSS?

enter image description here

This is what I get with the code below. directon="column" does not help. The Grid items are not fixed. I am looking for a solution that does not involve spreading the items to 3 columns via javascript bec I depend on the responsive breakpoints in Grid i.e. xs, sm, md, lg

enter image description here

<Grid container spacing={1}>
  <Grid item xs={4}>1</Grid>
  <Grid item xs={4}>2</Grid>
  <Grid item xs={4}>3</Grid>
  <Grid item xs={4}>4</Grid>
  <Grid item xs={4}>5</Grid>
  <Grid item xs={4}>6</Grid>
  <Grid item xs={4}>7</Grid>
</Grid>
duduwe
  • 888
  • 7
  • 16
  • To answer your question regarding MUIv4, no you cannot do this easily and will have to do the pure CSS approach linked above. MUIv5 has what you're looking for if you want to upgrade. Take a look at the Masonry component (https://mui.com/material-ui/react-masonry/) – ckesplin Apr 18 '22 at 20:07
  • Thank you @ckesplin. So, the layout is called "masonry". Shame that MUI always lags behind some of the common layouts. – duduwe Apr 18 '22 at 20:12

0 Answers0