Layout and spacing

Choose normal flow, a flexible row or column, a grid, or a hidden container.

Set direction, wrapping and alignment on the parent container.

Choose columns and rows, keep the cards intact and distinguish parent settings from a child span.

Identify where the space belongs before changing a value.

Keep text away from a card border and choose shared or separate sides.

Add outside space, group sides and use automatic margins when a block is narrower than its parent.

Use a regular shared distance or separate horizontal and vertical gaps.

Choose whether content, the parent or the viewport determines an element size.

Distinguish the parent layout from one child exception.

Choose how one flexible child uses space, aligns and appears in visual order.

Let one card occupy several cells without changing the parent column count.

Compare visible, clipped and scrollable content without deleting the text.