The Stack: Managing Vertical Spacing

The Stack pattern is the preferred way to handle vertical spacing between elements in a column. While CSS Grid can be used, it often introduces "mystery spacing" issues when parent containers have auto-heights. By using display: flex with flex-direction: column and a gap property, you gain better control over alignment. Powell recommends using an undefined custom property (e.g., --stack-gap) with a fallback value, allowing developers to easily override spacing on specific components without altering the global layout.

Prose: Typography-Driven Flow

For running text (like articles), consistent spacing is often undesirable because it ignores typographic hierarchy. The Prose pattern uses the "lobotomized owl" selector (* + *) to apply margin-block-start to elements. By using 1em as the spacing unit, the margin scales proportionally with the font size of the element itself. This ensures that headings stay closer to the content they introduce, adhering to standard design principles of proximity and hierarchy.

The Pile: Layering Elements with Grid

The Pile pattern uses CSS Grid to stack elements on top of one another by assigning them the same grid-area. This is a cleaner alternative to absolute positioning. Because it operates within a grid context, you can use z-index to control stacking order and align-self or justify-self to position specific children within the pile (e.g., placing a notification badge on an avatar or positioning text over an image). Powell emphasizes that place-items: center is the key to centering layered content, while place-content should be avoided as it controls the grid container itself rather than the items inside.