Container

A wrapper that layouts the inner content, such as the main column of a website, so that it displays nicely, both in desktop and mobile.

limited-width container version

The first version, the default one, comes with a max-width that limits the width in desktop, while bringing minimum padding for mobiles so that the content does not touch the screen edges.

it centers the content with margin: auto.

The max-width is defined by size. It defaults to md (aka 960px, or 60rem). We may pick 720px (sm). If we are to provide an arbitrary numeric value, we may as well use maw directly which is semantically more accurate.

The default padding is 16px, aka md. We may set it with the universal px style prop.

fluid container version

We may opt for a fluid container, which expands horizontally, with the fluid prop. It only comes with some padding, at 16px.

The fluid version is a bit of an overkill: We may as well use a Box with some horizontal padding instead.