Reflex | ResponsiveGrid

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

ResponsiveGrid

ResponsiveGrid provides a friendly interface to create responsive grid layouts with ease. SimpleGrid composes Box so you can pass all the Box props and css grid props with addition to the ones below.

Specify a fixed number of columns for the grid layout.

rx.responsive_grid(
    rx.box(height="5em", width="5em", bg="lightgreen"),
    rx.box(height="5em", width="5em", bg="lightblue"),
    rx.box(height="5em", width="5em", bg="purple"),
    rx.box(height="5em", width="5em", bg="tomato"),
    rx.box(height="5em", width="5em", bg="orange"),
    rx.box(height="5em", width="5em", bg="yellow"),
    columns=[3],
    spacing="4",
)

rx.responsive_grid(
    rx.box(height="5em", width="5em", bg="lightgreen"),
    rx.box(height="5em", width="5em", bg="lightblue"),
    rx.box(height="5em", width="5em", bg="purple"),
    rx.box(height="5em", width="5em", bg="tomato"),
    rx.box(height="5em", width="5em", bg="orange"),
    rx.box(height="5em", width="5em", bg="yellow"),
    columns=[1, 2, 3, 4, 5, 6],
)

ResponsiveGrid

A responsive grid component.

Props

Prop	Type	Description
`auto_columns`	str	Shorthand prop for gridAutoColumns to provide automatic column sizing based on content. Learn more here
`auto_flow`	str	Shorthand prop for gridAutoFlow to specify exactly how auto-placed items get flowed into the grid. Learn more here
`auto_rows`	str	Shorthand prop for gridAutoRows. Learn more here
`column`	str	Shorthand prop for gridColumn. Learn more here
`row`	str	Shorthand prop for gridRow. Learn more here
`columns`	List	A list that defines the number of columns for each breakpoint.
`min_child_width`	str	The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.
`spacing`	str	The gap between the grid items
`spacing_x`	str	The column gap between the grid items
`spacing_y`	str	The row gap between the grid items
`template_areas`	str	Shorthand prop for gridTemplateAreas Learn more here
`template_columns`	str	Shorthand prop for gridTemplateColumns. Learn more here
`template_rows`	str	Shorthand prop for gridTemplateRows. Learn more here

Base Event Triggers

← Grid Card →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

ResponsiveGrid

ResponsiveGrid

Props

Base Event Triggers

[ Learn ]