Reordering the stacking order of Grid Items in material-ui

Question

Reordering the stacking order of Grid Items in material-ui

I'm facing an issue with the stacking order of grid items when the browser shrinks.

On a regular desktop screen (lg):

---------------------------------------------
|   col 1     |         col 2       | col 3 |
---------------------------------------------

However, upon shrinking the browser, the layout looks like this:

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 2             |
-------------------------
-------------------------
|     col 3             |
-------------------------

Is it possible to achieve the following arrangement on a mobile screen using material ui Grid layout:

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 3             |
-------------------------
-------------------------
|     col 2             |
-------------------------

I've come across articles discussing changing the order of CSS grids for similar issues, but I'm wondering how to implement this using material-ui Grid layout.

https://codesandbox.io/s/l56nr7o6p9

css reactjs layout grid material-ui

Answer 1

Answer №1

Update: I have edited the response to accommodate MUI Core v5

    <Grid container spacing={16} justify="flex-start">
      <Grid item xs={12} sm={6} md={4} lg={4}>
        <Paper>
          <h1>{1}</h1>
        </Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4} lg={4} order={{ xs: 3, sm: 2 }}>
        <Paper>
          <h1>{2}</h1>
        </Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4} lg={4} order={{ xs: 2, sm: 3 }}>
        <Paper>
          <h1>{3}</h1>
        </Paper>
      </Grid>
    </Grid>

https://codesandbox.io/s/xvv7o07614?file=/src/GridStacking.js

Answer 2

Update: I have edited the response to accommodate MUI Core v5

    <Grid container spacing={16} justify="flex-start">
      <Grid item xs={12} sm={6} md={4} lg={4}>
        <Paper>
          <h1>{1}</h1>
        </Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4} lg={4} order={{ xs: 3, sm: 2 }}>
        <Paper>
          <h1>{2}</h1>
        </Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4} lg={4} order={{ xs: 2, sm: 3 }}>
        <Paper>
          <h1>{3}</h1>
        </Paper>
      </Grid>
    </Grid>

https://codesandbox.io/s/xvv7o07614?file=/src/GridStacking.js

Answer 3

Answer №2

Building on Olivier's insights, Material-UI relies heavily on the CSS flexbox layout for its implementation. The documentation explains that a flex container is generated by an element with a computed display of flex or inline-flex. Children of a flex container are referred to as flex items and are arranged using the flex layout model.

In simpler terms, Grid items are considered flex items, and the Grid Container functions as a flexbox container. This allows us to manipulate the order of Grid items relative to each other when the Box or Grid Container resizes. To achieve this, apply the following style to the grid item:

  itemStyle: {
    order: ${Desired_order_before_Shrinking},

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

To implement the above style, use

<Grid item xs={12} md={6} className={this.props.classes.itemStyle}>

. This will rearrange the items accordingly. Hopefully, this clarifies any confusion surrounding the topic.

UPDATE: With Material UI V5, thanks to @Adam Cooper's contribution below, you can reorder items as shown in the example 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>

Answer 4

Building on Olivier's insights, Material-UI relies heavily on the CSS flexbox layout for its implementation. The documentation explains that a flex container is generated by an element with a computed display of flex or inline-flex. Children of a flex container are referred to as flex items and are arranged using the flex layout model.

In simpler terms, Grid items are considered flex items, and the Grid Container functions as a flexbox container. This allows us to manipulate the order of Grid items relative to each other when the Box or Grid Container resizes. To achieve this, apply the following style to the grid item:

  itemStyle: {
    order: ${Desired_order_before_Shrinking},

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

To implement the above style, use

<Grid item xs={12} md={6} className={this.props.classes.itemStyle}>

. This will rearrange the items accordingly. Hopefully, this clarifies any confusion surrounding the topic.

UPDATE: With Material UI V5, thanks to @Adam Cooper's contribution below, you can reorder items as shown in the example 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>

Answer 5

Answer №3

Utilizing material-ui v5 allows for a more sophisticated approach by incorporating the order prop alongside the newly implemented responsive style system:

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

Answer 6

Utilizing material-ui v5 allows for a more sophisticated approach by incorporating the order prop alongside the newly implemented responsive style system:

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

Reordering the stacking order of Grid Items in material-ui

Answer №1

Answer №2

Answer №3

Similar questions

I am looking to establish a secure path specifically designated for an administrative role

How can we prevent the HTML escaping of text children in React.createElement?

Organize information in a React table following a predetermined sequence, not based on alphabetical order

Customizing the appearance of a JavaScript countdown timer's output on an individual basis

Creating click event handler functions using TypeScript

Express server and create-react-app build facing issues with Glyphicons and fonts functionality

Tips for adjusting UI size in CSS based on viewport dimensions and accommodating image content

Ensure that CSS is integrated correctly

Ways to insert additional panels prior to and after a selected panel

Is the misalignment due to a floating point error?

Ways to classify the prop type of a functional component by specifying the different types of props for the FC

Encountered an unusual IP address while attempting to start yarn - EADDRNOTAVAIL

What is the best way to retrieve all string constants from HTML or JSX code?

What is the process for determining the area of the section?

Tips for showing a DialogBox when a blur event occurs and avoiding the re-firing of onBlur when using the DialogBox

Is the Mini Cart button in Woocommerce not aligned properly?

Is there a way to move the submit form button to the next line using CSS?

error: cannot locate firebase object

Switch the Material UI text field color from black to a crisp white hue

React, ShoppingCart, and browser storage