For AI agents: the complete documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.
Reflex Logo
Docs Logo
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
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12

API Reference

rx.grid

Component for creating grid layouts.

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
rx.grid(
rx.card("Card 1", size="2", width="5rem"),
rx.card("Card 2", size="2", width="5rem"),
rx.card("Card 3", size="2", width="5rem"),
rx.card("Card 4", size="2", width="5rem"),
rx.card("Card 5", size="2", width="5rem"),
rx.card("Card 6", size="2", width="5rem"),
columns="3",
gap="0.75rem",
width="100%",
min_height="10rem",
border="1px dashed var(--gray-7)",
border_radius="0.5rem",
padding="0.75rem",
align="start",
justify="start",
)
align
justify

Props

PropTypeDescription
access_key
str

Provides a hint for generating a keyboard shortcut for the current element.

auto_capitalize
"off""none""on""sentences""words""characters"

Controls whether and how text input is automatically capitalized as it is entered/edited by the user.

content_editable
"inherit""plaintext-only"

Indicates whether the element's content is editable.

context_menu
str

Defines the ID of a <menu> element which will serve as the element's context menu.

dir
str

Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).

draggable
bool

Defines whether the element can be dragged.

enter_key_hint
"enter""done""go""next""previous""search""send"

Hints what media types the media element is able to play.

hidden
bool

Defines whether the element is hidden.

input_mode
"none""text""tel""url""email""numeric""decimal""search"

Defines the type of the element.

item_prop
str

Defines the name of the element for metadata purposes.

lang
str

Defines the language used in the element.

role
"alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem"

Defines the role of the element.

slot
str

Assigns a slot in a shadow DOM shadow tree to an element.

spell_check
bool

Defines whether the element may be checked for spelling errors.

tab_index
int

Defines the position of the current element in the tabbing order.

title
str

Defines a tooltip for the element.

as_child
bool

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

columns
str

Number of columns.

rows
str

Number of rows.

flow
"row""column""dense""row-dense""column-dense"

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

align
"start""center""end""baseline""stretch"

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

justify
"start""center""end""between"

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

spacing
"0""1""2""3""4""5""6""7""8""9"

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

spacing_x
"0""1""2""3""4""5""6""7""8""9"

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

spacing_y
"0""1""2""3""4""5""6""7""8""9"

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

Built with Reflex