Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Layout

/

Container

Constrains the maximum width of page content, while keeping flexible margins for responsive layouts.

A Container is generally used to wrap the main content for a page.

This content is constrained to a max width of 448px.
This content is constrained to a max width of 688px.
This content is constrained to a max width of 880px.
This content is constrained to a max width of 1136px.
rx.box(
    rx.container(
        rx.card(
            "This content is constrained to a max width of 448px.",
            width="100%",
        ),
        size="1",
    ),
    rx.container(
        rx.card(
            "This content is constrained to a max width of 688px.",
            width="100%",
        ),
        size="2",
    ),
    rx.container(
        rx.card(
            "This content is constrained to a max width of 880px.",
            width="100%",
        ),
        size="3",
    ),
    rx.container(
        rx.card(
            "This content is constrained to a max width of 1136px.",
            width="100%",
        ),
        size="4",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

Constrains the maximum width of page content.

See https://www.radix-ui.com/themes/docs/components/container
Test
PropTypeDescriptionValues
sizeLiteral

The size of the container: "1" - "4" (default "4")

Event Triggers

No component specific event triggers

← CondFlex →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting