I've been delving into the Material-UI@next grid layout system to grasp its intricacies.
What I'm aiming for is to have two papers that stretch across the entire width of the screen and collapse into one paper when the screen size shrinks. The documentation provides the following code snippet:
<Container>
<Grid container spacing={24}>
<Grid item xs={12}>
<Paper>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
</Grid>
</Container>
The code above produces this output: https://i.stack.imgur.com/rVdfw.png
To achieve my desired outcome of having just two papers, I tweaked the code as follows:
<Container>
<Grid container spacing={24}>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
</Grid>
</Container>
However, as depicted in this screenshot, the two papers don't span the whole width of the screen: https://i.stack.imgur.com/XHYwA.png
Could someone guide me to a functional example snippet that enables me to achieve full-width display for both elements?