mui
[Masonry] Component not centered due to a default margin at -8
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] I have tested the latest version
Steps to reproduce 🕹
No response
Current behavior 😯
Component not centered due to a default margin at -8
Expected behavior 🤔
margin will be at 0
Context 🔦
No response
Your environment 🌎
No response
It doesn't look like this bug report has enough info for one of us to reproduce it.
Please provide a CodeSandbox (https://mui.com/r/issue-template), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve
@ZeeshanTamboli . If you look at the component with the browser dev tool, you see that by default there is a margin of -8 which shifts the masonry slightly to the left and top
@ZeeshanTamboli . If you look at the component with the browser dev tool, you see that by default there is a margin of -8 which shifts the masonry slightly to the left and top
Okay, I am not sure whether it's a bug or is intentional. I'll move it back to "status: needs triage". @hbjORbj Will take a look and confirm.
This is by design. As you can see in the following code snippet, the negative margin to the wrapper is provided in order to offset the margin applied to each child. https://github.com/mui/material-ui/blob/0246ec2cdd85de48c669da3f84e25f0dd7eb51f0/packages/mui-lab/src/Masonry/Masonry.js#L95-L99
