extra (unwanted) space between grids

Question

I am using Material UI and trying to have a nested grid page,

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const styles = theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: "center",
    backgroundColor: "blue"
  },
  grid: {
    backgroundColor: "yellow",
    padding: 10,
    margin: 10,
    height: 100
  }
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <Grid container spacing={24}>
        <Grid container item xs={9}>
          <Grid className={classes.grid} item xs={12}>
            <Paper className={classes.paper}>xs=12</Paper>
          </Grid>
          <Grid className={classes.grid} item xs={12}>
            <Paper className={classes.paper}>xs=6</Paper>
          </Grid>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CenteredGrid);

below is what I get from the code. I noted that when the right side component (which has the word test inside it) gets longer, the left side bottom component goes down in a way that it's in the middle of the space that it has, but what I need is having those two left side grids to be under each other WITHOUT the gap. Please, could you tell EDITED: 1) why is this happening? 2) also noted if I remove the container from the inner Grid the gap is gone, why is it causing the gap? 3) please if you have any other solution tell me exactly why they are working and the doc (the exact page not a whole website please) where I can go and learn them

Answer 1

You just need to add a style attribute of display: table to the outer Grid container and a display: inline-flex on the Grid inner-containers:

Working example: https://codesandbox.io/s/1rwnr1y433

Grid.js

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const styles = theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: "center",
    backgroundColor: "blue"
  },
  grid: {
    backgroundColor: "yellow",
    padding: 10,
    margin: 10,
    height: 100
  }
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <Grid style={{ display: "table" }} container spacing={24}>
        <Grid style={{ display: "inline-flex" }} container item xs={9}>
          <Grid className={classes.grid} item xs={12}>
            <Paper className={classes.paper}>xs=12</Paper>
          </Grid>
          <Grid className={classes.grid} item xs={12}>
            <Paper className={classes.paper}>xs=12</Paper>
          </Grid>
        </Grid>
        <Grid style={{ display: "inline-flex" }} item xs={3}>
          <Paper className={classes.paper}>
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CenteredGrid);