javascript - 在 React 中移动网格布局

Question

您好，我需要移动网格以显示以下布局

但是现在我的布局看起来像这样

我仍在尝试了解网格是如何工作的，下面是我格式化网格的尝试，但是它不想在我希望的庄园中对齐

    <Grid item xs={8}>
            <Grid className = {classes.root} container direction ="column"
                alignItems="flex-start">
                {/* <Typography variant="title" style={{ }}>example</Typography> */}
                <Paper className = {classes.mainDetailsPaper}>
                    <Typography variant="title">Main Details</Typography><Divider />
                    <Typography variant="subheading">Organisation: </Typography>
                    <Typography variant="subheading">Category: </Typography>
                    <Typography variant="subheading">Sub Category: </Typography>
                </Paper>
            </Grid>
            <Grid className = {classes.root} container direction ="row"
            alignItems="flex-end">
                <Paper className = {classes.subDetailsPaper}>
                    <Typography variant="title">Contract Dates</Typography><Divider />
                    <Typography variant="subheading">Start Date: </Typography>
                </Paper>
                <Paper className = {classes.subDetailsPaper}>
                    <Typography variant="title">Valuation</Typography><Divider />
                    <Typography variant="subheading">Estimated Contract Value: </Typography>
                </Paper>
                <Paper className = {classes.subDetailsPaper}>
                    <Typography variant="title">Supplier Info</Typography><Divider />
                </Paper>
            </Grid>
        </Grid>

标签： javascriptreactjsgridmaterial-design