0
221
VisualizaçõesHow to disable MUI Grid items from stacking when window width is smaller than 600px
I am using the MUI Grid component to make a layout. I placed two grid items next to each other and one below it. However when I resize the window and the width becomes smaller than 600px the two grid items next to each other will stack. Does someone know where I can disable the two grid items stacking under 600px window width?
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
You can see the default breakpoint values here to know what xs or sm is. In Grid item, xs={12} sm={6} means that when the screen is smaller than sm (600px), grid item spans 12 columns (100% width), when it's smaller than md and larger than xs, grid item spans 6 columns (50% width)
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Item>xs=12 sm=6</Item>
</Grid>
<Grid item xs={12} sm={6}>
<Item>xs=12 sm=6</Item>
</Grid>
<Grid item xs={12}>
<Item>xs=12</Item>
</Grid>
</Grid>
Edit: To disable stacking when the width is smaller than 600px:
<Grid container spacing={2}>
<Grid item xs={6}>
<Item>xs=6</Item>
</Grid>
<Grid item xs={6}>
<Item>xs=6</Item>
</Grid>
<Grid item xs={12}>
<Item>xs=12</Item>
</Grid>
</Grid>
·
Juan Pablo Isaza
Relatório
Responde à pergunta