Skip to content
Layout

display

Sets an element's outer box type and the layout model used for its children.

4,791 effects in the catalog use this property.

Syntax

display: block | inline | flex | grid | inline-flex | none;

Watch out

`display: none` also removes the element from the accessibility tree. Use a visually-hidden pattern when content should remain available to screen readers.

Common values

flex
One-dimensional alignment
grid
Two-dimensional grid layout
none
Removes the element from layout entirely

Effects using display

These are working effects from the catalog. Open a tile to inspect the full source.