Проблема с расположением сетки в пользовательском интерфейсе React Material

Question

Я пытаюсь создать конкретный макет, используя Material UI Grid Компонент, но я просто не могу на всю жизнь понять это правильно.

У меня есть Dialog, где я хочу, чтобы макет заканчивался следующим образом:

Если синее поле содержит некоторую информацию о проекте, зеленое поле будет содержать какой-либо тип мультимедиа, а желтое поле будет содержать описательный текст.

Но в настоящее время с этим кодом это выглядит так:

<Grid xl={12}>
    <Grid spacing={0} xs={2}>
        <Grid container direction="column">
            <Grid item xs={1}>
                { this.getGridItems("Platforms", data["platforms"].split(','), true) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Engines", data["engines"].split(','), true) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Frameworks", data["frameworks"].split(','), true) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Languages", data["languages"].split(',')) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Roles", data["roles"].split(',')) }
            </Grid>
        </Grid>
    </Grid>
    <Grid spacing={0} xl={10}>
        <Grid container>
            <Grid item xl={9}>
                <h1>Image Goes Here</h1>
            </Grid>
            <Grid item xl={3}>
                <h1>Description</h1>
                { data["description"] }
            </Grid>
        </Grid>
    </Grid>
</Grid>

Я не могу понять, где я ошибся, так как не могу понять, как работает макет Grid. Пожалуйста, помогите?

Если необходимо, вот код для getGridItems():

getGridItems = (header, data, chips) => {
    let list = [];
    let fontSize = 11;
    list.push(
        <h5>{ header }</h5>
    );
    if(data.length > 0 && data[0] !== '') {
        if(chips !== undefined && true) {
            data.forEach(value => {
                let chipData = ChipConstants[value];
                list.push(
                    <Grid item xs>
                        <Chip
                            style={{ fontSize: fontSize}}
                            avatar={
                                <Avatar
                                    style={{ width: 24, height: 24 }}
                                    alt={chipData["avatar"]["alt"]}
                                    src={require("../img/avatars/"+chipData["avatar"]["img"])}
                                />}
                            label={chipData["avatar"]["alt"]}
                            className={styles.chip}
                        />
                    </Grid>
                );
            });
        } else {
            data.forEach(value => {
                list.push(
                    <Grid item xs style={{ fontSize: fontSize}}>
                        { value }
                    </Grid>
                );
            });
        }
    } else {
        list.push(
            <Grid item xs style={{ fontSize: fontSize}}>
                None
            </Grid>
        );
    }
    return list;
};

Answer 1

Я не совсем понимаю, как ваш текущий код соотносится с тем, что вы хотите, поэтому вместо того, чтобы пытаться исправить ваш текущий код, я просто предоставлю отправную точку, которая обеспечивает базовую структуру того, что вы хотите.

Если у вас есть конкретные вопросы о том, как работает Grid в моем коде, я уточню по мере необходимости.

index.js

import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import Button from "@material-ui/core/Button";
import MyDialog from "./MyDialog";

class App extends React.Component {
  state = {
    open: false
  };

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };
  render() {
    return (
      <>
        <CssBaseline />
        <Button variant="contained" onClick={this.handleClickOpen}>
          Open Dialog
        </Button>
        <MyDialog open={this.state.open} handleClose={this.handleClose} />
      </>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

MyDialog.js

import React from "react";
import Grid from "@material-ui/core/Grid";
import Dialog from "@material-ui/core/Dialog";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  root: {
    height: "100%"
  },
  project: {
    backgroundColor: "lightblue",
    height: "100%"
  },
  right: {
    height: "100%"
  },
  media: {
    backgroundColor: "lightgreen",
    height: "70%"
  },
  desc: {
    backgroundColor: "yellow",
    height: "30%"
  }
};
const MyDialog = props => {
  return (
    <Dialog fullScreen open={props.open} onClose={props.handleClose}>
      <Grid container className={props.classes.root}>
        <Grid item xs={3} className={props.classes.project}>
          <IconButton
            color="inherit"
            onClick={props.handleClose}
            aria-label="Close"
          >
            <CloseIcon />
          </IconButton>
          Project
        </Grid>
        <Grid item xs={9}>
          <Grid container direction="column" className={props.classes.right}>
            <Grid item className={props.classes.media}>
              Media
            </Grid>
            <Grid item className={props.classes.desc}>
              Description
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Dialog>
  );
};
export default withStyles(styles)(MyDialog);

Вот в CodeSandbox, с которым вы можете поэкспериментировать: