DocsBlog

Get Started

Components

Data Grid

Signals

Styling

Theming

↑↓Navigate
↵Select
EscClose

  • 1.8.0

  • Day

    Night

    Preview

    Switch mode

  • cerberus

    acheron

    elysium

    oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerContainer QueryDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTA ModalDate PickerDialogFieldFieldsetFile UploaderIconButtonInputLoading StatesMarqueeMenuNotificationsNumber InputPaginationPin InputPopoverProgress IndicatorsPrompt ModalRadioRatingSelectSliderSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFormat Relative TimeFrameHighlightJSON Tree ViewLocalePortalPresenceShowSwapsplitPropsTheme

Container

Used to constrain a content's width to the current breakpoint, while keeping it fluid.

  • Panda
View as Markdown
Open this page in Markdown
Anthropic
Open in Claude
Ask questions about this page
OpenAI
Open in ChatGPT
Ask questions about this page

Import

import { Container } from 'styled-system/jsx'

Usage

The default maxWidth is 8xl which maps to 90rem (1440px).

Loading example...

Sizes

Use the maxWidth prop to change the size of the container.

Loading example...

Props

The Container component accepts any CSS properties.

On this page

  • Import
  • Usage
    • Sizes
  • Props
Edit this page on Github
Content in a Container
This is some text within a container of size 1/4.
This is some text within a container of size 1/2.
This is some text within a container of size 3/4.
This is some text within a container of size full.