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.

.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.