When using the collapsed mode, `.grid` should not have margin

[jelmerdemaat]

When using .grid--collapsed the child .cells have no padding, which is correct. However, the .grid parent still has negative margins to compensate for the padding. This seems incorrect, as the grid is now aligned incorrectly too far to the left/right sides of the screen.

Proposed solution, add:

.grid--collapsed {
    margin-right: 0;
    margin-left: 0;
}

Could be placed after line 426:

https://github.com/vicompany/ezpz-flexbox-grid/blob/master/lib/_ezpz-flexbox-grid.scss#L426

[svensigmond]

Hi Jelmer,

This behaviour is as intended. It is implied (but maybe not documented) that the grid is used within a container element that has a left and right padding equal to half the width of the grid gutters.

Imagine a situation where content is placed in a normal grid cell with padding, but underneath it you would like to place a white box with some text and padding. By placing the box in a normal cell, the text content will not be aligned with the text content of the other grid cell.

Using a collapsed cell or cells will allow you to place the box in the gutter, but still have the content of the box align with the rest ofthe content of the page by adding padding equal to the gutter size to the box itself.

I hope this explains the reasoning behind the collapsed option.

Would adding a container solve your problem or are you trying to do something different? Maybe you can create a jsfiddle / codepen page with your desired result so I can have a closer look at it?

Thanks!

[jelmerdemaat]

Sorry for not responding earlier. Thanks for explaining. I understand the reasoning but I feel like there is something missing here. When I get to a test case some day I'll post it here.