Material UI Layout - 3 column

Question

I want to design my layout something like this using material UI, I have look into it and thinking of using Grid component, but how do I implement something like this for the middle column into two rows??

Answer 1

Example Code

I'm using Material UI's Grid component in the following code.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import clsx from "clsx";

const useStyles = makeStyles({
  container: {
    height: "100%", // So that grids 1 & 4 go all the way down
    minHeight: 150, // Give minimum height to a div
    border: "1px solid black",
    fontSize: 30,
    textAlign: "center"
  },
  containerTall: {
    minHeight: 250 // This div has higher minimum height
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <Grid container direction="row" spacing={2}>
      <Grid item xs>
        <div className={classes.container}>1</div>
      </Grid>
      <Grid item container direction="column" xs spacing={2}>
        <Grid item xs>
          <div className={classes.container}>2</div>
        </Grid>
        <Grid item xs>
          <div className={clsx(classes.container, classes.containerTall)}>
            3
          </div>
        </Grid>
      </Grid>
      <Grid item xs>
        <div className={classes.container}>4</div>
      </Grid>
    </Grid>
  );
}

The above code will generate the following result:

Explanation

The overall grid structure looks like:

<Grid container direction="row">
  <Grid item xs />
  <Grid item xs container direction="column">
    <Grid item xs />
    <Grid item xs />
  </Grid>
  <Grid item xs />
</Grid>

We first create a grid container with flex direction of row. Inside the container, we put 3 Grid item components so that they align from left to right. For the second (middle) Grid item, we also define it as a container with flex direction of column. Inside it, we place two Grid items such that one is on top and one is on bottom.

Note that particularly for grid 3's code, I added className={clsx(classes.container, classes.containerTall)}. This is basically saying that we would apply classes.container and classes.containerTall to this grid. You can read this section on more about clsx().

To make grid 3 slightly taller than grid 2, I've set the minHeight of grid 2 to be 150px while the minHeight of grid 3 is set to be 250px.