Container

A wrapper that centers the content and keeps it aways from screen edges.

It can wrap the main column of a website, adding padding on mobile and centering on desktop.

grid version

The grid version uses a grid layout and centers stuff with grid positioning.

max-width version

The default version comes with a max-width (for desktop) and some padding (for mobile):

• 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.
• To remove indirection, we can also set max-width with maw.
• The default padding is 16px, aka md. We change it with the 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.

Note: a Box with horizontal padding has the same effect than fluid.