I'm trying to achieve a two column layout, both of them equal height and each taking half of the screen. Picture explains it better, here is one.

The not working code is as follows:

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

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    alignItems: "stretch"
  },
  column: {
    flexDirection: "column"
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

export default props => {
  const classes = useStyles();
  return (
    <>
      <CssBaseline />
      <Grid container className={classes.root}>
        {/* COLUMN ONE */}
        <Grid container item className={classes.column}>
          <Grid item xs={6}>
            <Paper className={classes.paper}>1: xs=6</Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper className={classes.paper}>1: xs=6</Paper>
          </Grid>
          <Grid container item>
            <Grid item xs={3}>
              <Paper className={classes.paper}>1: xs=3 left</Paper>
            </Grid>
            <Grid item xs={3}>
              <Paper className={classes.paper}>1: xs=3 right</Paper>
            </Grid>
          </Grid>
        </Grid>
        {/* COLUMN TWO */}
        <Grid container item className={classes.column}>
          <Grid item xs={6}>
            <Paper className={classes.paper}>2: xs=6</Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper className={classes.paper}>2: xs=6</Paper>
          </Grid>
        </Grid>
      </Grid>
    </>
  );
};

Obligatory codesandbox is here.

Could someone explain me what am I doing wrong here?

I'm trying to achieve a two column layout, both of them equal height and each taking half of the screen. Picture explains it better, here is one.

The not working code is as follows:

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

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    alignItems: "stretch"
  },
  column: {
    flexDirection: "column"
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

export default props => {
  const classes = useStyles();
  return (
    <>
      <CssBaseline />
      <Grid container className={classes.root}>
        {/* COLUMN ONE */}
        <Grid container item className={classes.column}>
          <Grid item xs={6}>
            <Paper className={classes.paper}>1: xs=6</Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper className={classes.paper}>1: xs=6</Paper>
          </Grid>
          <Grid container item>
            <Grid item xs={3}>
              <Paper className={classes.paper}>1: xs=3 left</Paper>
            </Grid>
            <Grid item xs={3}>
              <Paper className={classes.paper}>1: xs=3 right</Paper>
            </Grid>
          </Grid>
        </Grid>
        {/* COLUMN TWO */}
        <Grid container item className={classes.column}>
          <Grid item xs={6}>
            <Paper className={classes.paper}>2: xs=6</Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper className={classes.paper}>2: xs=6</Paper>
          </Grid>
        </Grid>
      </Grid>
    </>
  );
};

Obligatory codesandbox is here.

Could someone explain me what am I doing wrong here?

• javascript
• reactjs
• flexbox
• material-ui

• It looks like the rendered HTML is correct, so the issue is possibly in the CSS. – Alvaro Commented Feb 29, 2020 at 18:20

2 Answers 2

There's a bug with Material UI way of laying out nested grid containers, here. The workaround - found by @londonoliver - is to nest containers inside the grid items:

<Grid container direction="row">
  <Grid item>
    <Grid container direction="column">
      <Grid item>1</Grid>
      <Grid item>2</Grid>
    </Grid>
  </Grid>
  <Grid item>
    <Grid container direction="column">
      <Grid item>3</Grid>
      <Grid item>4</Grid>
    </Grid>
  </Grid>
</Grid>

Dropping this here. I had a similar issue and the fix was to nest two Grid's inside a Grid container as below:

<Grid container spacing={1}>
  <Grid container item spacing={2}>
    <Grid item xs={6}>1</Grid>
    <Grid item xs={6}>2</Grid>
  </Grid>
  <Grid container item spacing={2}>
    <Grid item xs={4}>3</Grid>
    <Grid item xs={8}>4</Grid>
  </Grid>
</Grid>