Flow CSS Utility


The flow utility provides flow and rhythm between direct sibling elements. Where --flow-space is not defined: the default value is 1em, which equals the font size of the affected element.

Code language
CSS
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

By defining --flow-space in the CSS of either a child element of .flow, or on .flow itself: that value will be honoured in line with the cascade and specificity.

For example: if you set --flow-space: 3rem on the third element inside of a .flow container: only that element will have a 3rem top margin.

This is by far my most used CSS snippet and I add it to every project I work on without fail.

Those of you that have used Every Layout will probably recognise this as The Stack, which evolved from an article I wrote back in 2018, for the legendary 24 Ways.

Demo


Comments

If you liked this post, you might like these ones, too

  1. Create a line break while maintaining inline status

    🔥 A handy quick tip.

    Continue
  2. CSS Frameworks, hype and dogmatism

    Some notes on the dogmatism and gatekeeping themes of Tech Twitter and how they can generate often incorrect and naive statements—specifically about frameworks and methodologies.

    Continue
  3. Convert a 2D array into a flat, 1D array of unique items

    Convert a messy multidimensional array into a nice single dimension array of unique items.

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.