How can I reduce the width of the first Grid element in the Material UI, so that the other 3 elements fill the freed space equally? visual description
Should i change grid item's 'xl', 'lg', 'md', 'sm', 'xs' sizing?
1 Answers
You should first learn what those grid props mean. The xs, md, etc are referring to breakpoints, not just sizing. To strictly answer your question, you could change the number of columns and, and specify an appropriate xs value for each of them , e.g.:
<Grid container spacing={2} columns={14}>
<Grid item xs={2}>
<Item>Column 1</Item>
</Grid>
<Grid item xs={4}>
<Item>Column 2</Item>
</Grid>
<Grid item xs={4}>
<Item>Column 3</Item>
</Grid>
<Grid item xs={4}>
<Item>Column 4</Item>
</Grid>
</Grid>
Related