The MUI grid example displayed below appears to leave an additional space on the right side of the grid, giving the impression that it does not fully occupy the available space on the page.
https://i.sstatic.net/Q6sgB.png
I have attempted to adjust/remove the margin values as shown below, but without success:
.MuiGrid-spacing-xs-1 {
width: calc(100% + 8px);
margin: -4px;
}
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: "lightblue"
},
paper: {
padding: theme.spacing(1),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
export default function NestedGrid() {
const classes = useStyles();
function FormRow() {
return (
<React.Fragment>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>item</Paper>
</Grid>
</React.Fragment>
);
}
return (
<div className={classes.root}>
<Grid container spacing={1}>
<Grid container item xs={12} spacing={3}>
<FormRow />
</Grid>
<Grid container item xs={12} spacing={3}>
<FormRow />
</Grid>
<Grid container item xs={12} spacing={3}>
<FormRow />
</Grid>
</Grid>
</div>
);
}