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. Build a fancy hover animation

    Learn how to use the power of CSS to take any collection of images and make them blend well together with a fancy interactive state.

    Continue
  2. A safer way to vertically fill the viewport

    🔥 A handy quick tip.

    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 $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming 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.