Blog Post

Thwacking Spacing Zombies

When using Flexbox for a three-column grid, you can add an ::after pseudo element to the end of the parent element to help space-* feel more natural on the last line. If there are only two items in the last row, they often get spread to each side. The pseudo element acts as a third element in the list and thus pushes the last real element to the center position. If you then have three elements on the bottom, it’s 1px tall and shouldn’t have much impact on your layout. Make sure the pseudo element is 1px high so that if it overflows to the next line, it won’t cause any issues. See it: https://codepen.io/undeadinstitute/pen/xxpBomZ