Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

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 "3")

Event Triggers

See the full list of default event triggers
← CondFlex →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting