New row leaving space in MUI Grid system

Question

In the following image the blue block is rendered under the red and green blocks. I would like the blue block to render directly underneath the red block.

Is there a way to achieve this with MUI grid?

import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";

export default function BasicList() {
  return (
    <Box>
      <Grid container>
        <Grid item alignContent="center" justifyContent="center" md={6}>
          <Box style={{backgroundColor:"red"}} height={200}>
            MD = 6 Height = 200
          </Box>
        </Grid>
        <Grid item md={6}>
          <Box style={{backgroundColor:"green"}} height={600}>
            MD = 6 Height = 600
          </Box>
        </Grid>
        <Grid item md={6}>
        <Box style={{backgroundColor:"blue"}} height={200}>
            MD = 6 Height = 200
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
}

Answer 1

You should put both Red and Blue boxes together as one grid. something like this can solve the problem:

import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";

export default function BasicList() {
  return (
    <Box>
      <Grid container>
        <Grid item alignContent="center" justifyContent="center" md={6}>
          <Box style={{backgroundColor:"red"}} height={200}>
            MD = 6 Height = 200
          </Box>
          <Box style={{backgroundColor:"blue"}} height={200}>
            MD = 6 Height = 200
          </Box>
        </Grid>
        <Grid item md={6}>
          <Box style={{backgroundColor:"green"}} height={600}>
            MD = 6 Height = 600
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
}

Each grid can be responsible for a column in your design.