Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

UI

Overview

State

Overview

Hosting

Library

/

Layout

/

Grid

Grid

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

Basic Example

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%",
)

API Reference

Grid

Component for creating grid layouts.

Test
PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

columnsstr

Number of columns

rowsstr

Number of rows

flowLiteral

How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"

alignLiteral

Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"

justifyLiteral

Alignment of children along the cross axis: "start" | "center" | "end" | "between"

spacingLiteral

Gap between children: "0" - "9"

spacing_xLiteral

Gap between children horizontal: "0" - "9"

spacing_yLiteral

Gap between children vertical: "0" - "9"

Event Triggers

See the full list of default event triggers
← FragmentInset →

Did you find this useful?

Raise an issue
Edit this page
HomeGalleryChangelogIntroductionHosting

Grid

Basic Example

API Reference

Grid