[Grid] Discussion gutter behaviour

[stunaz]

I was designing my app using the Layout features provided by material-ui@next, I had some trouble du to the fact that gutter properties makes grow my container by gutter/2 with the extra margin applied. now after reading the code, I came to conclusion that it was intentional.

But i found it counterintuitive, I would rather have the gutter/2 applied to the padding properties than to the margin properties of the container

What to do you think?

Versions

• Material-UI: next

[kgregory]

Why do you prefer padding? You left this out of your description.

An element's margin is outside if its contents. By applying the gutter with a margin, its border, padding, and contents exist within the gutters. Using padding for the Layout gutters would insert the intended spacing between the margin + border and the contents.

[oliviertassinari]

Could it be a duplicate of #7466? The negative margin has some limitations.

1. You can not have a negative margin outside of the body
2. Background color is counter intuitive (use display flex in that case)

There is work around for all these limitations. I'm not aware of a better implementation yet.

[stunaz]

@kgregory not sure if padding is the soludion. Maybe I am using wrongly the contaier/item properties
look at the following sanbox ... see how SideNav and Content overlap the AppBar

[kgregory]

@stunaz I think @oliviertassinari is right, it seems to be a duplicate of #7466 because your issue is a side-effect of using negative margin. Take a look at this fork of your sandbox. One of the ways you can deal with this is by undoing the top margin on the inner container.

example has been corrected

[stunaz]

your fork is identical to mine.
duplicate it is

[kgregory]

Sorry @stunaz. The approach was to add marginTop: 0 to the inner container.

Here is a different approach: Wrap your inner container in an item.

[stunaz]

I see, thanks

[Hospes]

Guys how did you solve problem with additional width of Grid container??? Right now if spacing is 0 then width of grid container is okay, but if spacing > 0 then width of grid container is growing, look at screenshot:

I need spacing between items but I dont need extra width =_=

[oliviertassinari]

@Hospes I have been suggesting 3 workarounds.

[stunaz]

I use the first option for now. I will probably try the second option a bit later.
I really think that the spacing should be 0 be default

[oliviertassinari]

@stunaz Why would you change the default gutter value? I do think that the issue isn't representative of the 80%. I have been using this Grid implementation for almost a year now on different projects. I have only noticed it here. The reason is simple, I have never used the grid component for the general layout of the apps, only for children elements, where the distance with the body is large enough not to see the issue.