Container

Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid.

Import

Usage

To contain any piece of content, wrap it in the Container component.

Container Size

By default, the Container component sets the maxWidth of the content to 60 characters (60ch) but you can customize this by passing custom maxWidth values or changing the size tokens defined in theme.sizes.container.

• About the default value: The ch unit is a relative unit defined by the rendered typeface's "0" character width. This width varies by the shape and style of the font.
• If you are curious about the reason for this default value of 60 characters, consider this explanation about line length from Better Web Type.

Centering the children

In some cases, the width of the content can be smaller than the container's width. You can use the centerContent prop to center the content. It renders a flexbox with flexDirection set to column and alignItems set to center.