Changing the Order of Grid Item Stacking in Material-Ui

Changing the order of Grid Item stacking in material-ui

Extending to Olivier's answer Material-UI heavily uses the CSS flexbox layout within its implementation. As the documentation quotes

A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.

So Grid items are flex items and Grid Container is flexbox container in laymans language. Hence we can use the order property on Grid items to change their relative order of appearance when the Box or Grid Container resizes. So passing the style in the following manner to the grid item should work out

  itemStyle: {
    order: ${Desired_order_before_Shrinking},

    [theme.breakpoints.up(`${DesiredScreenSize}`)]: {
      order: ${Desired_order_after_Shrinking},
    },
 
  }

Finally doing <Grid item xs={12} md={6} className={this.props.classes.itemStyle}> will reorder that item. Hope it creates better understanding.

UPDATE:
Material UI V5. Thanks to @Adam Cooper's answer below

<Grid container spacing={2}>
  <Grid item md={12} lg={4} order={{ md: 1, lg: 1 }}>col 1</Grid>
  <Grid item md={12} lg={4} order={{ md: 3, lg: 2 }}>col 2</Grid>
  <Grid item md={12} lg={4} order={{ md: 2, lg: 3 }}>col 3</Grid>
</Grid>

Specify Material UI's Grid item location

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.

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

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

Change Grid item column order on small screens

Use like this:

<Grid container>
          <Grid spacing={3} container item xs={12} md={12}>
            <Grid item xs={12} md={6} className={classes.item}>
              <img
                width="50px"
                src="https://cdn3.vectorstock.com/i/1000x1000/37/37/simple-cartoon-a-cute-bear-vector-18823737.jpg"
                alt="abc"
              />
            </Grid>
            <Grid container item xs={12} md={6} className={classes.item}>
              <Paper>Text Content 1...</Paper>
            </Grid>
          </Grid>

          <Grid container item spacing={3} xs={12} md={12} className="flexgrid">
            <Grid container item xs={12} md={6} className={classes.item}>
              <Paper>Text Content 2...</Paper>
            </Grid>
            <Grid container item xs={12} md={6} className={classes.item}>
              <img
                width="50px"
                src="https://cdn3.vectorstock.com/i/1000x1000/37/37/simple-cartoon-a-cute-bear-vector-18823737.jpg"
                alt="abd"
              />
            </Grid>
          </Grid>
</Grid>

SOURCE

PREVIEW

for re-order added:

<Grid container item spacing={3} xs={12} md={12} className="flexgrid">

and css :

@media screen and (max-width: 720px) {
  .flexgrid{
    flex-direction: column-reverse
  }
  
}

Material ui grid change content direction to row

I recommend you to use grid system same as technical documentation example shown below,

export default function BasicGrid() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={8}>
        <Item>Autocomplete Here</Item>
      </Grid>
      <Grid item xs={4}>
        <Item>Button Here</Item>
      </Grid>
    </Grid>
  );
}

Here is working sandbox example.

Material UI responsive grid direction

You can use useMediaQuery

import useMediaQuery from '@material-ui/core/useMediaQuery';

const largeScreen = useMediaQuery(theme => theme.breakpoints.up('md'));

<Grid container direction={largescreen?"row":"column"}>

React Material UI Grid Horizontally Align Items for Containers With Different Number of Items

We want to add props to the <Grid> to make this possible.

1. alignItems="flex-start" will allow grid items to stick to the top then fall towards the bottom.
2. direction="column" will change the flow of how items are "stacked" in a sense. This will change the sizing of the container and items that it is attached to so expect some xs={12} to turn into xs={6} and vice versa.

Here's the example code below as well as its implementation via sandbox.

import "./styles.css";
import { Grid } from "@material-ui/core";

export default function App() {
  return (
    <div className="App">
      <Grid alignItems="flex-start" container spacing={1}>
        <Grid container direction="column" item xs={6} spacing={1}>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            x1
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            x2
          </Grid>
        </Grid>
        <Grid container direction="column" item xs={6} spacing={1}>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y1
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y2
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y3
          </Grid>
        </Grid>
      </Grid>
    </div>
  );
}

---

Related Topics