如何使用material-ui实现自定义卡布局？

Question

如何使用材质ui实现以下卡片布局？我的应用程序从数据库中检索数据，并相应地填充字段。

我试图划分卡上的内容，但是没有成功。有没有一种简单的方法可以将卡分为几个部分？到目前为止，我的如下所示，它从数据库中检索数据并填充字段：

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import EditItem from './editItem'
import DeleteItem from './deleteItem'
import { API, graphqlOperation }  from "aws-amplify";
import * as queries from '../graphql/queries';

import {Avatar} from "@material-ui/core";
const styles = {
  card: {
    minWidth: 800,
  },
  bullet: {
    display: 'inline-block',
    margin: '0 2px',
    transform: 'scale(0.8)',
  },
  title: {
    fontSize: 14,
  },
  pos: {
    marginBottom: 12,
  },
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'inherit',
    padding: '10px'
  },
  cover: {
    width: 151,
  },
  avatar: {
    margin: 10,
  },

  card_actions:{
    align: 'right'
  }
};



class ListItems extends Component {

  state = {
    items: []
  }

  componentDidMount = () => {
    this.getItems()
  }

  getItems = () => {
    API.graphql(graphqlOperation(queries.listItems))
    .then(data => this.setState({items: data.data.listItems.items}))
  };

  render(){
    const { classes } = this.props;
    const { items } = this.state;
    console.log(items)
    return (
      <div className={classes.root}>
      <Grid container className={classes.root} spacing={16} direction={"column"} alignContent={"center"}>
          {items.map(item => (
             <Grid key={item.id} item >
                 <Card className={classes.card}>
                   <CardContent>
                      <Typography component="p" color="textSecondary" >
                       Date: {item.date}
                      </Typography>
                     <Avatar variant="square" className={classes.square}  >
                       {item.avatar}N
                     </Avatar>
                     <Typography className={classes.title} color="textPrimary" gutterBottom >
                     {item.title}
                   </Typography>
                      <br />
                      <Typography component="p" color="textSecondary">
                      {item.description}
                      </Typography>
                     {/*<Typography component="p" color="textSecondary" align={"right"}>
                       Time: {item.time}
                     </Typography>*/}
                  </CardContent>
                    <CardActions className={classes.card_actions}>
                      <EditItem currentItem={item}/>
                      <DeleteItem currentItem={item}/>
                   </CardActions>

                 </Card>
               </Grid>
             ))}
         </Grid>
      </div>
    );
  }
}

ListItems.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ListItems);