Here's what I am able to create
And here is what I want to achieve: The aspiration
Here's my code:
<Grid container spacing={3}>
<Grid item md={4} xs={15}></Grid>
<Grid item md={4} xs={15}></Grid>
<Grid item md={4} xs={15}></Grid>
<Grid item md={3} xs={15}><TrashIcon> <AddIcon></Grid>
</Grid>
Additional (Edited) How do I align the grid fields in the bottom to the ones on top rows? new confusion but have a limit on questions per hour
CodePudding user response:
You can use auto-layout feature of the Grid
:
The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.
<Grid container spacing={3}>
<Grid item md xs={12}>
<input style={{ width: "100%" }} />
</Grid>
<Grid item md xs={12}>
<input style={{ width: "100%" }} />
</Grid>
<Grid item md xs={12}>
<input style={{ width: "100%" }} />
</Grid>
<Grid item md="auto" xs={12}>
<TrashIcon /> <AddIcon />
</Grid>
</Grid>