mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.36k stars 32.13k forks source link

[Masonry] Give Masonry Fine Grained Spacing Controls #34235

Open fuzl-llc opened 2 years ago

fuzl-llc commented 2 years ago

Duplicates

Latest version

Summary 💡

Currently there is only a single "spacing" setting to specify the spacing. It would be great if you could specify "horizontal spacing" and "vertical spacing" separately. It would also be great to specify if you want spacing applied to the left and right of the masonry component or just between columns. This could be done in conjunction with fixing bug #34234 which is related to having margin on the right of the masonry but not on the left.

Examples 🌈

No response

Motivation 🔦

There are reasons to want vertical and horizontal spacing to be different and I want to fully control my design. Consider a responsive masonry layout where the mobile view just has a single column. I want the spacing horizontally on either side of the column to be zero (to use all available space) but I want some vertical spacing (to separate the items).

fuzl-llc commented 2 years ago

One other comment... I said it would be great to specify if you want spacing applied to the left and right of the masonry component or just between columns. I started thinking this should apply as well to the spacing above and below the whole grid of items as well, but then really shouldn't there just be no extra space to the left, right, top, and bottom and just let the masonry container's padding handle that? It seems like by default the "spacing" controls should only apply spacing between the columns and rows and something else should do the stuff around the whole grid of items. I'm new to material UI so don't know the patterns but I feel like I saw a "gutter" setting doing something like that on another control. Just some thoughts...