I'm currently working with the material ui grid system, and I have a specific requirement. I need to create a grid container with a fixed height of 200px that accommodates full-width items. The challenge here is that I want the items to fill the container starting from the top, leaving any remaining space only at the bottom.
Desired Layout:
https://example.com/desired-layout.png
Current Output: https://example.com/current-output.png
Here's my code snippet:
<Grid
container
xs={12}
justifyContent="center"
alignItems="flex-start"
css={css`
height: 200px;
background-color: #aaa;
`}
>
<Grid xs={12}>first row</Grid>
<Grid xs={12}>second row</Grid>
<Grid xs={12}>third row</Grid>
</Grid>
If anyone could assist me in resolving this issue, it would be greatly appreciated!