Stack layout
Elements placed one below another with one consistent rule controlling the vertical space between them.
See it
What it is
A stack layout arranges sibling elements vertically and controls the space between them as one rule. It is the basic shape behind article sections, form fields, card contents, and most mobile screens.
Reach for it whenever items belong in a top-to-bottom sequence and need a dependable rhythm. Treating the stack as a small layout primitive keeps every child from inventing its own top and bottom margins. Every Layout by Heydon Pickering and Andy Bell named the primitive the Stack; the older trick behind it is Pickering's lobotomized owl selector, * + *, which puts space between siblings and never around the group. SwiftUI calls the same idea VStack, and Tailwind spells it space-y.
Gotcha: one gap rarely suits every relationship. A label and input should sit closer than one form group and the next, so nest stacks with different spacing tokens. Use gap where possible; mixed child margins can collapse or combine into spacing nobody intended.
Ask AI for it
Arrange these components as a stack with display: flex, flex-direction: column, and gap: 1rem. Remove vertical margins from the direct children, nest a tighter stack at gap: 0.5rem for related label and input pairs, and use gap: 2rem between major groups. Map those three values onto the project's spacing tokens if it already has them. Keep the DOM order identical to the visual top-to-bottom order.