Container

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>

API Reference

This component is based on the div element and supports common margin props.

Prop	Type	Default
`asChild`	`boolean`	No default value
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	`"4"`
`display`	`Responsive<"none" \| "initial">`	No default value
`align`	`Responsive<"left" \| "center" \| "right">`	No default value

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>`	No default value
`px`	`Responsive<enum \| string>`	No default value
`py`	`Responsive<enum \| string>`	No default value
`pt`	`Responsive<enum \| string>`	No default value
`pr`	`Responsive<enum \| string>`	No default value
`pb`	`Responsive<enum \| string>`	No default value
`pl`	`Responsive<enum \| string>`	No default value
`width`	`Responsive<string>`	No default value
`minWidth`	`Responsive<string>`	No default value
`maxWidth`	`Responsive<string>`	No default value
`height`	`Responsive<string>`	No default value
`minHeight`	`Responsive<string>`	No default value
`maxHeight`	`Responsive<string>`	No default value
`position`	`Responsive<enum>`	No default value
`inset`	`Responsive<enum \| string>`	No default value
`top`	`Responsive<enum \| string>`	No default value
`right`	`Responsive<enum \| string>`	No default value
`bottom`	`Responsive<enum \| string>`	No default value
`left`	`Responsive<enum \| string>`	No default value
`overflow`	`Responsive<enum>`	No default value
`overflowX`	`Responsive<enum>`	No default value
`overflowY`	`Responsive<enum>`	No default value
`flexBasis`	`Responsive<string>`	No default value
`flexShrink`	`Responsive<enum \| string>`	No default value
`flexGrow`	`Responsive<enum \| string>`	No default value
`gridColumn`	`Responsive<string>`	No default value
`gridColumnStart`	`Responsive<string>`	No default value
`gridColumnEnd`	`Responsive<string>`	No default value
`gridRow`	`Responsive<string>`	No default value
`gridRowStart`	`Responsive<string>`	No default value
`gridRowEnd`	`Responsive<string>`	No default value

PreviousGrid

NextSection

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities

Container

API Reference