Kevin Powell - Community•2y ago

Grid item content goes out of container

I am using MUI v5 Grid for my project. I wanted to line up 5 items but when I checked for responsiveness, the middle item content goes out of its container just nearly the breakpoint. Code is below:

  <Grid container spacing={3} columns={20}>
    <Grid item xs={20} lg={4}>
        ...content
    </Grid>
  </Grid>

  <Grid container spacing={3} columns={20}>
    <Grid item xs={20} lg={4}>
        ...content
    </Grid>
  </Grid>

Is there any workaround or css that I can apply to prevent this? I only tried overriding the breakpoint for it to not go out of the container but it seems not a good solution to me.

1 Reply

Wolle•2y ago

My opinion is, if you use a design system, you should stick to it. Check on the lowest and highest pixel of each size and adjust accordingly. If they overlfow with lg={4} try lg={5} xl={4} and so on. Embrace it don't fight it. Workarounds and such things will cause more trouble down the road.

Gaming

Programming

Grid item content goes out of container