Constrains the maximum width of page content.
<Box style={{ background: "var(--gray-a2)", borderRadius: "var(--radius-3)" }}>
<Container size="1">
<DecorativeBox>
<Box py="9" />
</DecorativeBox>
</Container>
</Box>
This component is based on the div
element and supports common margin props.
Prop | Type | Default |
---|---|---|
asChild | boolean | |
size | Responsive<"1" | "2" | "3" | "4"> | "4" |
display | Responsive<"none" | "initial"> | |
align | Responsive<"left" | "center" | "right"> |
Container sizes use the following max-width
values, which may be customized if needed.
Size | CSS variable | Width |
---|---|---|
size="1" | --container-1 | 448px |
size="2" | --container-2 | 688px |
size="3" | --container-3 | 880px |
size="4" | --container-4 | 1136px |
The following props are shared between Box, Flex, Grid, Container and Section components. Read more about layout components in Layout.
Prop | Type | Default |
---|---|---|
p | Responsive<enum | string> | |
px | Responsive<enum | string> | |
py | Responsive<enum | string> | |
pt | Responsive<enum | string> | |
pr | Responsive<enum | string> | |
pb | Responsive<enum | string> | |
pl | Responsive<enum | string> | |
width | Responsive<string> | |
minWidth | Responsive<string> | |
maxWidth | Responsive<string> | |
height | Responsive<string> | |
minHeight | Responsive<string> | |
maxHeight | Responsive<string> | |
position | Responsive<enum> | |
inset | Responsive<enum | string> | |
top | Responsive<enum | string> | |
right | Responsive<enum | string> | |
bottom | Responsive<enum | string> | |
left | Responsive<enum | string> | |
overflow | Responsive<enum> | |
overflowX | Responsive<enum> | |
overflowY | Responsive<enum> | |
flexBasis | Responsive<string> | |
flexShrink | Responsive<enum | string> | |
flexGrow | Responsive<enum | string> | |
gridArea | Responsive<string> | |
gridColumn | Responsive<string> | |
gridColumnStart | Responsive<string> | |
gridColumnEnd | Responsive<string> | |
gridRow | Responsive<string> | |
gridRowStart | Responsive<string> | |
gridRowEnd | Responsive<string> |