Layout & Spacing

How elements line up along a common edge or axis.

How visual weight is distributed across a layout.

Invisible horizontal lines that elements snap to for clean alignment.

The visible edge around a box or component.

How browsers calculate a box's final size.

A screen width where the layout changes.

Vertical sections of a grid that hold content.

A wrapper that limits the width of content.

How tightly content is packed into a space.

An invisible structure of columns and rows that aligns content.

The space between columns in a grid.

How content is aligned along the main axis.

Space outside an element, between it and its neighbors.

Space inside an element, between its edge and its content.

A repeating pattern of spacing that gives a layout flow.

A soft blur behind an element to make it feel raised.

The order in which the eye sees elements on a page.

The empty area around and between elements.