Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Layout

/

Grid

Component for creating grid layouts. Either rows or columns may be specified.

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
rx.grid(
    rx.foreach(
        rx.Var.range(12),
        lambda i: rx.card(f"Card {i + 1}", height="10vh"),
    ),
    columns="3",
    spacing="4",
    width="100%",
)
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
rx.grid(
    rx.foreach(
        rx.Var.range(12),
        lambda i: rx.card(f"Card {i + 1}", height="10vh"),
    ),
    rows="3",
    flow="column",
    justify="between",
    spacing="4",
    width="100%",
)

Component for creating grid layouts.

Test
PropTypeDefault ValueValues
as_child
bool
columns
Union[str, Breakpoints]
rows
Union[str, Breakpoints]
flow
Union[Literal, Breakpoints]
align
Union[Literal, Breakpoints]
justify
Union[Literal, Breakpoints]
spacing
Union[Literal, Breakpoints]
spacing_x
Union[Literal, Breakpoints]
spacing_y
Union[Literal, Breakpoints]

Event Triggers

See the full list of default event triggers
← FragmentInset →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting