使用 Material-UI Grid 定位组件

Question

I have a codesandbox ( https://codesandbox.io/s/determined-pascal-ypmwk?file=/src/App.js ) that shows how my current app is set up with Material-UI grid. I have 5 components that are being positioned and this is how I want them to look on the lg setting and above.

Then on the md and below setting to look like this

I have tried a few different ways and I think the closest I have come is what is currently in my codesandbox. I cannot quite figure out how to put component 5 on the same row for the bigger screens and on the next row for the smaller screen.

Thanks in advance for any help!

Answer 1

You can make use of Material UI breakpoints hook as per the documentation material-ui-breakpoints

I created a demo app for you. Do have a look in case it fits your use case link-to-demo

Here's some sample code for the same

import React from "react";
import withWidth, { isWidthDown, isWidthUp } from "@material-ui/core/withWidth";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  item1: {
    height: "200px",
    border: "1px solid black"
  },
  item2: {
    height: "400px",
    border: "1px solid black"
  },
  item3: {
    height: "200px",
    border: "1px solid black"
  },
  item4: {
    height: "200px",
    border: "1px solid black"
  },
  item5: {
    height: "200px",
    border: "1px solid black"
  }
}));

const App = (props) => {
  const classes = useStyles();

  if (isWidthUp("lg", props.width)) {
    return layout1(classes);
  } else if (isWidthDown("md", props.width)) {
    return layout2(classes);
  }

  return <React.Fragment />;
};

const layout1 = (classes) => {
  return (
    <Grid container>
      <Grid item lg={12} className={classes.item1}>
        1
      </Grid>
      <Grid item lg={4} className={classes.item2}>
        2
      </Grid>
      <Grid item lg={8}>
        <Grid container>
          <Grid item lg={6} className={classes.item3}>
            3
          </Grid>
          <Grid item lg={6} className={classes.item4}>
            4
          </Grid>
          <Grid item lg={12} className={classes.item5}>
            5
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};

const layout2 = (classes) => {
  return (
    <Grid container>
      <Grid item xs={12} className={classes.item1}>
        1
      </Grid>
      <Grid item xs={9} className={classes.item2}>
        2
      </Grid>
      <Grid item xs={3}>
        <Grid container>
          <Grid item xs={12} className={classes.item3}>
            3
          </Grid>
          <Grid item xs={12} className={classes.item4}>
            4
          </Grid>
        </Grid>
      </Grid>
      <Grid item xs={12} className={classes.item5}>
        5
      </Grid>
    </Grid>
  );
};

export default withWidth()(App);