MUI: How to prevent Grid items from going on next row?

user_13868683 0
Viewed 7610

I am using MUI Grid structure in ReactJs to display 5 columns like this:

enter image description here

In smaller screens the columns are moving in the next row. But In smaller screens I also want all the columns to show in one row only and I can access other columns by scrolling horizontally.

<Grid
  container
  spacing={2}
  style={{
    maxHeight: "100vh",
    overflowY: "auto",
    overflowX: "hidden",
    height: "440px",
    overflow: "auto",
  }}
>
  <Grid item xs={2.1}>
    {cards.map((card) => <Card props={card} /> )}
  </Grid>
</Grid>
material-ui reactjs grid css
2 Answers

Because Grid uses flexbox under the hood. You can simply set the wrap value to nowrap in your Grid container, you can see the full API of Grid component here.

<Grid
  container
  wrap="nowrap" // --> add this line to disable wrap
  sx={{ overflow: "auto" }} // --> add scrollbar when the content inside is overflowed
  spacing={8}
>
  {...}
</Grid>

Live Demo

Edit 66944361/how-to-prevent-columns-to-go-on-next-row-in-material-ui-grid-structure

user_94494260

The Grid is based on a 12-column grid layout. Therefore xs accepts only the following values:

'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12.

I would recommend you to place an empty grid with an xs size equal to 1 at the beginning and end. That brings you to a total size of xs equal to 12.

          <Grid
            container
            spacing={2}
            style={{
              maxHeight: "100vh",
              overflowY: "auto",
              overflowX: "hidden",
              height: "440px",
              overflow: "auto",
            }}
          >
               <Grid item xs={1}/>
                 {cards.map((card) => (
                   <Grid item xs={2}>
                     <Card props={card} />
                   </Grid>
                  ))}
               <Grid item xs={1}/>
          </Grid>
user_152611910
Related