Source

Flow

The Flow layout creates consistent vertical spacing between consecutive sibling elements. Originally inspired by the "lobotomized owl" selector, this component uses the * + * pattern to add margin-top to all elements except the first child, ensuring consistent vertical rhythm throughout your content.

Example

<div class="flow" style="--layout-gap: 1.5rem">
  <h1>First element (no margin)</h1>
  <p>Second element (gets margin-top)</p>
  <p>Third element (gets margin-top)</p>
  <blockquote>Fourth element (gets margin-top)</blockquote>
</div>

Custom Properties

Property	Default	Description
`--layout-gap`	`1em`	Vertical spacing between elements. Set it on the `.flow` element; children that are layouts themselves keep this spacing.

← layout: Flex layout: Grid →