Container

A wrapper that centers the content and keeps it aways from the screen edges. For example, we wrap the main column of a website, to have centering in desktop and padding on mobile.

max-width version

The default version comes with a max-width (for desktop) and some padding (for mobiles). It centers the content with margin: auto.

The max-width defaults to md (aka 960px). We change it with size. For example, we can pick 720px (sm) instead. If we are to provide an arbitrary numeric value, we may as well set maw directly to remove indirection.

The default padding is 16px, aka md. We change it with the regular px style prop.

fluid version

We may opt for a fluid container, which expands horizontally, with the fluid prop. It only comes with some padding, at 16px. A Box with horizontal padding has the same effect.

grid version

The grid version doesn't use padding and doesn't center with max-width. Instead, it sets a grid layout and center stuff with grid positioning.