Flexbox gutters

README.md

Flexbox gutters

Problem

• We use flexbox for our layout.
• We want to add horizontal and vertical gutters inbetween these items.
• Items wrap according to contents (flex-wrap: wrap), therefore we can't decide when/where to apply gutters using breakpoints.

Solution

In the future this will be possible using the {row,column}-gap (longhand) and gap (shorthand) properties. However this is not currently well supported.

A discussion of this problem can be seen at https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items and http://www.heydonworks.com/article/flexbox-grid-finesse#gutter-tactics.

The most common solution involves padding on the items and negative margins on the container, to offset any extraneous padding.

https://jsfiddle.net/OliverJAsh2/qm7tbvso/1/

Note that the choice of margin and padding, and the direction in which these are applied, is significant.

If we used margins for our gutter items instead of padding:

• margin collapsing would break gutters when nesting gutter containers, e.g. https://jsfiddle.net/OliverJAsh2/Lwxyt07p/6/
• any width specified on the gutter item would not be inclusive of the gutter, e.g. https://jsfiddle.net/OliverJAsh2/p8e50c6m/1/

If we specified vertical gutters using top instead of bottom, previous content may be inaccessible due to overlap: https://jsfiddle.net/OliverJAsh2/xqm5h17r/6/.

Known issues

• Surrounding overflow: auto always shows scroll bar https://jsfiddle.net/OliverJAsh2/f7r89gpy/1/

@blvz Thaks!

@Antosik Thanks for the more accurate detection. The one thing I would suggest is that if you want to target Firefox 63 exactly, it added support for the prefers-reduced-motion media feature, but that would require finding some property that Firefox supported at that time to the @supports block so that it gets used by Firefox.