I am currently working with React to layout three elements below the topElement. My goal is to have these 3 elements fill up the space equally beneath topElement, removing the right-hand gap highlighted in red in the provided image (while keeping the gap at the top). Here is my current code:
<Box padding={4}>
<Grid container spacing={4}>
<Grid item xs={12}>
<topElement />
</Grid>
</Grid>
<Grid container spacing={PADDING} direction="row" xs={12}
justify="space-between" alignItems="center" >
<Grid item xs={4}>
<el1...
/>
</Grid>
<Grid item xs={4}>
<El2...
/>
</Grid>
<Grid item xs={4}>
<El3...
/>
</Grid>
...
Can anyone help me figure out the final piece of the puzzle? Thanks in advance!