cu.css · Flow

Applies a margin to sibling elements based on a --flow-space custom property.

Content

Margin (default)

Content

Margin (set inline using --flow-space)

Content

Flow utility with margin visualised in green

/*
FLOW
@link: See The Stack in Every Layout https://every-layout.dev/layouts/stack/
@link: https://piccalil.li/tutorial/improve-the-readability-of-the-content-on-your-website#heading-the-flow-utility
@link: https://piccalil.li/quick-tip/flow-utility/
*/
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}