I've been struggling for ages to make my responsive layout work properly! Whenever I add spacing to the Grid container with class=spotlight, things get misaligned. How can I add spacing to the gutters (the space between Grid items within the spotlight container Grid) without affecting the margins (the space outside the grid)? Here's my code:
import React from "react";
import { Grid, makeStyles, Typography } from "@material-ui/core";
import MasterLayout from "../components/MasterLayout";
import ContentThumbnail from "../components/ContentThumbnail";
import ContentList from "../components/ContentList";
const useStyles = makeStyles((theme) => ({
masterLayout: {
padding: theme.spacing(3),
},
spotlight: {},
}));
const DefaultDashboard = ({ padding }) => {
const classes = useStyles();
return (
<MasterLayout>
{/*Top row with right bar */}
<Grid
container
className={classes.masterLayout}
spacing={3}
alignItems="flex-start"
>
{/* Spotlight section */}
<Grid container xl={8} lg={12} item className={classes.spotlight}>
<Grid item xs={12}>
<Typography variant="h3">Spotlight</Typography>
</Grid>
<Grid item xl={3} lg={3} md={3} xs={6}>
<ContentThumbnail />
</Grid>
<Grid item xl={3} lg={3} md={3} xs={6}>
<ContentThumbnail />
</Grid>
<Grid item xl={3} lg={3} md={3} xs={6}>
<ContentThumbnail />
</Grid>
<Grid item xl={3} lg={3} md={3} xs={6}>
<ContentThumbnail />
</Grid>
</Grid>
{/* List section 1 */}
<Grid container item xl={4} lg={3} md={6} xs={12}>
<Grid item xs={12}>
<Typography variant="h3">Title 2</Typography>
</Grid>
<Grid item xs={12}>
<ContentList />
</Grid>
</Grid>
{/* List section 2 */}
<Grid container item xl={4} lg={3} md={6} xs={12}>
<Grid item xs={12}>
<Typography variant="h3">Title 2</Typography>
</Grid>
<Grid item xs={12}>
<ContentList />
</Grid>
</Grid>
{/* List section 3 */}
<Grid container item xl={4} lg={3} md={6} xs={12}>
<Grid item xs={12}>
<Typography variant="h3">Title 3</Typography>
</Grid>
<Grid item xs={12}>
<ContentList />
</Grid>
</Grid>
{/* List section 4 */}
<Grid container item xl={4} lg={3} md={6} xs={12}>
<Grid item xs={12}>
<Typography variant="h3">Title 4</Typography>
</Grid>
<Grid item xs={12}>
<ContentList />
</Grid>
</Grid>
</Grid>
</MasterLayout>
);
};
export default DefaultDashboard;
Thank you,
Katie