Skip to main content

Container

Contains a group of content. Most useful for page layout and any other scenario where the maximum inline size of the content needs to be constrained.

Examples

Max Inline Size

View standalone

<Container> can have a maximum inline size (width in horizontal languages). Contained items will be aligned to the center of the block element by default.

Contained
Code
<Container maxInlineSize="reading">
  <Placeholder>
    Contained
  </Placeholder>
</Container>

Fluid Page Width Container

View standalone

<Container> can optionally be set to include padding on its inline sides. This is particularly useful for page containers.

Contained
Code
<Container withPadding>
  <Placeholder>
    Contained
  </Placeholder>
</Container>

Constrained Page Width Container

View standalone

withPadding can be combined with a maxInlineSize to achieve a constrained page container.

Contained
Code
<Container
  maxInlineSize="md"
  withPadding
>
  <Placeholder>
    Contained
  </Placeholder>
</Container>

Start Alignment

View standalone

The contained element will be aligned to the start of the block element if align="start" is passed.

Contained
Code
<Container
  align="start"
  maxInlineSize="reading"
>
  <Placeholder>
    Contained
  </Placeholder>
</Container>

Gap

View standalone

<Container>s can also receive a gap prop, similar to <Flex> and <Stack>

Contained
Contained
Code
<Container
  gap="16px"
  maxInlineSize="reading"
>
  <Placeholder>
    Contained
  </Placeholder>
  <Placeholder>
    Contained
  </Placeholder>
</Container>

Props

as

ElementType<any>

Component renders by default as a `div` unless another value is passed.

maxInlineSize

"form" | "md" | "lg" | "xl" | "reading"

Specifies the horizontal or vertical maximum size of the component depending on its writing mode.

align

"center" | "start"

Defines where content is aligned on the X axis (for horizontal languages, Y for vertical). Default is `center`.

Default: "center"

withPadding

boolean

Default: false

gap

ConditionalStyleWithResponsiveArray<Values<{ none: number; "4px": CSSVarFunction; "8px": CSSVarFunction; "12px": CSSVarFunction; "16px": CSSVarFunction; "20px": CSSVarFunction; ... 10 more ...; "160px": CSSVarFunction; }, { ...; }>, string[] & { ...; }>

inputRef

Ref<HTMLDivElement>

Has to not be called ref - done because we also want to use a generic see https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509