Блог

Здравствуйте, мне нужно переместить мои сетки, чтобы отобразить следующий макет

Однако прямо сейчас мой макет выглядит следующим образом

Я все еще пытаюсь понять, как работает сетка, ниже приведена моя попытка форматирования сетки, однако она не хочет выравниваться в соответствии с моим желанием

     <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>