Full Width Material-UI Grid not working as it should - css

Question

I am trying to understand Material-UI#next grid layout system.
My goal is to have two papers that expand through the whole width screen and break whenever the screen gets smaller to just one paper. The documentation has 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>
This results in the following:
I then modified the code to try to achieve my goal of just two papers, as this:
<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>
But as you can see, this results into two papers which are not taking the whole screen:
Can someone point me to a working example snippet that allows me to have two elements that take the full width?

Answer 1

I suspect the Container component is causing you problems. Since you haven't linked its implementation, see below for a working example of what you want.
Since Material uses flexbox they make use of property flexGrow
The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up. The flex grow factor of a flex item is relative to the size of the other children in the flex-container.
This is the property that governs the growth of elements in the grid.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
const styles = theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'center',
color: theme.palette.text.secondary,
},
});
function CenteredGrid(props) {
const { classes } = props;
return (
<div className={classes.root}>
<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>
</div>
);
}
CenteredGrid.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(CenteredGrid);

Answer 2

Best practice is to test out all break points and specify the allocation of space for each screen width.
<Grid item xs={12} sm={12} md={12} lg={6} xl={4}>
</Grid>
xs, extra small 0px
sm, small: 600px
md, medium: 960px
lg, large: 1280px.
xl,extra-large: 1920px
https://material-ui.com/customization/breakpoints/
xs Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority.
sm Defines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens if not overridden.
md Defines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens if not overridden.
(and so forth)
more here: https://material-ui.com/api/grid/

Answer 3

For those using Material UI with styled-components, here's how I was able to get the grid items to grow correctly:
import GridBase from "#material-ui/core/Grid";
const Grid = styled(GridBase)`
.MuiGrid-root {
flex-grow: 1;
}
`
Now you can use Grid normally in your components.

Answer 4

I know this is old question , but just want to share.
The problem from your code is spacing={24}
based on documentation Spacing . By default, the spacing between two grid items follows a linear function: output(spacing) = spacing * 8px
e.g. spacing={24} creates a 192px wide gap. so at the end , the space available for the content very small.
<Grid container spacing={2}> // usually 2 or 3 is quite enough for me
<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>

Answer 5

I was also experiencing this issue. What solved it for me is using the "sx" property to make the width of the parent grid = 100%. See code below:
<Box sx={{ width: '100%' }}>
<Button variant="contained" fullWidth> myButton </Button>
</Box>