Layout object that constrains content to a configurable width and centers within the viewport.


Displays contents until the viewport width reaches 1440px at which point it is centered.

Outer margin

Outer margins can be added to a block of content using the soft prop.

Size variants

SizeNameMinimum width (px)
xsExtra small800
smSmall 1280
lgLarge 1800

Use the size prop to make use of the max-width variants.

Full width

fluid removes the default max-width so content spans the full width:

Left aligned

free prevents the container from being center aligned when the max-width kicks in:

Was this page helpful?