ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Layout

Grid

rx.grid

Official docs

Workshop order

Lay out a set of photos in a tidy grid, three to a row.

rx.grid places its children in rows and columns like a checkerboard. Where Flex lines things up along one line, Grid aligns rows and columns together. Set the number of cells with columns or rows, and the children fill the cells in order.

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

Try the props

Change the number of columns, the horizontal and vertical gaps, and the alignment inside each cell. Only Card 2 is taller, so the effect of align shows on the other cards in the same row.

Try the props

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

columns

spacing_x

spacing_y

align

rx.grid(
    rx.card("Card 1"),
    rx.card("Card 2", height="5rem"),
    rx.card("Card 3"),
    rx.card("Card 4"),
    rx.card("Card 5"),
    rx.card("Card 6"),
    rx.card("Card 7"),
    columns="3",
    spacing_x="3",
    spacing_y="3",
    align="stretch",
    width="100%",
)

columns is the number of columns, spacing_x the gap between columns, spacing_y the gap between rows. align sets the vertical position inside each cell.

Prop	Values	Default	Use
`columns`	`"1"` ~ `"9"` or a CSS string (`"120px 1fr"`)	none	Number of columns, or a column width template
`rows`	`"1"` ~ `"9"` or a CSS string	none	Number of rows, or a row height template
`flow`	`"row"` `"column"` `"dense"` `"row-dense"` `"column-dense"`	`"row"`	Order in which children fill the cells
`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	`"stretch"`	Vertical alignment inside a cell
`justify`	`"start"` `"center"` `"end"` `"between"`	`"start"`	Horizontal alignment of the cells as a group. Only visible when there is space left over
`spacing`	`"0"` ~ `"9"`	none	Gap between rows and columns
`spacing_x` `spacing_y`	`"0"` ~ `"9"`	none	Separate gaps between columns and between rows
`as_child`	`True` / `False`	`False`	Render as the child element and merge the props

Every prop accepts rx.breakpoints(...) to vary by screen width.

Setting rows instead

Give rows="3" together with flow="column", and children fill three cells from top to bottom before moving to the next column. The column widths then fit their content, which leaves space over, and justify="between" spreads the columns out to both edges.

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

Setting cell widths and spanning cells

Put a CSS grid-template-columns value into columns instead of a number, and you can set each column's width. "120px 1fr" makes the first column 120px and gives the rest to the second. Give a child the CSS grid_column="span 2" and it spans two columns; grid_row="span 2" spans two rows.

Sidebar

Content

Wide

Tall

rx.vstack(
    rx.grid(
        rx.card("Sidebar"),
        rx.card("Content"),
        columns="120px 1fr",
        spacing="3",
        width="100%",
    ),
    rx.grid(
        rx.card("Wide", grid_column="span 2"),
        rx.card("1"),
        rx.card("2"),
        rx.card("3"),
        rx.card("Tall", grid_row="span 2"),
        rx.card("4"),
        rx.card("5"),
        columns="3",
        spacing="3",
        width="100%",
    ),
    width="100%",
)

flow="dense": filling the gaps

When two-cell cards come one after another, gaps appear at the ends of rows. The default flow="row" (left) keeps the order and leaves the gaps; flow="dense" (right) pulls smaller cards from later on back into the earlier gaps.

rx.flex(
    rx.grid(
        rx.card("A", grid_column="span 2"),
        rx.card("B", grid_column="span 2"),
        rx.card("C"),
        rx.card("D"),
        columns="3",
        flow="row",
        spacing="2",
        width="45%",
    ),
    rx.grid(
        rx.card("A", grid_column="span 2"),
        rx.card("B", grid_column="span 2"),
        rx.card("C"),
        rx.card("D"),
        columns="3",
        flow="dense",
        spacing="2",
        width="45%",
    ),
    justify="between",
    width="100%",
)

A different column count per screen width

columns=rx.breakpoints(...) gives 1 column on narrow screens, 2 columns from xs (520px), and 3 columns from md (1024px). Try resizing the browser window.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

rx.grid(
    rx.foreach(rx.Var.range(6), lambda i: rx.card(f"Card {i + 1}")),
    columns=rx.breakpoints(initial="1", xs="2", md="3"),
    spacing="3",
    width="100%",
)

Filling the order

Six photos are laid out with columns="3", and each image fills its cell with width="100%". Since the cells are the same width, the photos come out evenly sized too.

rx.grid(
    *[
        rx.image(
            src=f"https://picsum.photos/id/{n}/300/300",
            width="100%",
            height="auto",
            border_radius="6px",
        )
        for n in [10, 11, 12, 13, 14, 15]
    ],
    columns="3",
    spacing="2",
    width="100%",
    max_width="420px",
)

Workshop notes

rx.grid aligns rows and columns together. Set the number of cells with columns or rows.
columns accepts "1"–"9" or a CSS template string such as "120px 1fr".
Set gaps with spacing (both), spacing_x (between columns), spacing_y (between rows).
flow sets the fill order; grid_column="span 2" on a child makes it span several cells.
Vary the column count per screen width, as in columns=rx.breakpoints(initial="1", md="3").

← Previous

Layout · Stack

Layout · Container

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.