Skip to content

Instantly share code, notes, and snippets.

@OliverJAsh OliverJAsh/
Last active Jan 24, 2020

What would you like to do?
Flexbox gutters

Flexbox gutters


  • 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 and

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

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:

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.