I'm building a dashboard layout with Material Ui Grid and struggling with a variable height item that causes the dashboard to have unsightly gaps. What I am hoping to achieve is grid items that rearrange themselves to use the minimum vertical space from the top of the layout.
For example, when the variable height box is very tall, the smaller boxes should move over to the right column to push the empty space to the bottom of the layout. When the variable height box is short, the items should stack evenly.
I know I can do this with multiple containers, but it messes up the spacing and doesn't allow for easily adding dynamic boxes, depending on the state of the dashboard. Ideally I would only have one <Grid container />.
Thanks.