Skip to content

Instantly share code, notes, and snippets.

@OliverJAsh OliverJAsh/README.md
Last active Jan 24, 2020

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

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.