Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flexbox gutters

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:

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

@limitlessloop

This comment has been minimized.

Copy link

@limitlessloop limitlessloop commented Mar 13, 2020

I came across this gist on caniuse.com after I was looking for a way to conditionally add support for flex gap. The biggest issue I'm predicting is what happens when support is available for flex gap, but we have no way to check for it? If we use any of the workarounds and support flex gap at the same time both with will be applied without a way to conditionally check for support.

I created a PostCSS flex gap polyfill which surprisingly does a lot without affecting much of the authoring process. There are a few limitations but with someone with more JavaScript knowledge than me, we may be able to implement some fixes to overcome these limitations.

It doesn't use any surplus wrapper divs and the author doesn't need to do anything special for it to work. However, I need to find a way to not apply it when flex gap is supported.

https://github.com/limitlessloop/flex-gap-polyfill

I would very much welcome your thoughts, ideas possible alternates to provide a more reliable solution to this. At the moment it's quite advanced and it will allow to even use nested containers with gaps applied, however to make it more production-ready I might be able to offer an option to enable/disable this.

@blvz

This comment has been minimized.

Copy link

@blvz blvz commented Mar 27, 2020

@limitlessloop since @supports is broken for these kind of situations, I guess the only solution would be abusing queries to make it vendor/version specific. A hacky solution, nonetheless, that also can't be added beforehand.

/* firefox 64+  @media pointer + -moz-user-select: none */
/* safari 13+   flow-root + -webkit-initial-letter */
/* chrome 79+   width max() */
@media (pointer: coarse), (pointer: fine) {
  @supports (-moz-user-select: none) or
            ((display: flow-root) and (-webkit-initial-letter: 1)) or
            (width: max(1px, 2px)) {
    /* resets polyfill code and apply native solution */
  }
}
@limitlessloop

This comment has been minimized.

Copy link

@limitlessloop limitlessloop commented Mar 28, 2020

Hi @blvz that's a good workaround. I heard recently that they may introduce a temporary property of flex-gap to help detect support. Fingers crossed they implement this :).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.