- 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.
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/.
- Surrounding
overflow: auto
always shows scroll bar https://jsfiddle.net/OliverJAsh2/f7r89gpy/1/
@blvz @limitlessloop Looking at the support table for flexbox gap, it was only added in Safari 14.1 desktop and 14.8 on iOS. My first thought is that logical properties (i.e.
margin-inline-start
, etc.) are a much better check for Safari and Chrome, as they're either at or a bit after flexbox gap so you don't risk assuming gap works when in fact it does not. The one problem with this is that Firefox has logical property support going back farther than the others, so that can be fixed a bit more accurately by wrapping the whole thing in a check for the prefers-reduced-motion media feature, which was added in Firefox 63, the same version that added flexbox gap support.I haven't actually tested this, so let me know if I've overlooked something. Browser comparison I used to figure this out.