Responsive Grid

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.chakra.responsive_grid(
    rx.chakra.box(
        height="5em", width="5em", bg="lightgreen"
    ),
    rx.chakra.box(
        height="5em", width="5em", bg="lightblue"
    ),
    rx.chakra.box(height="5em", width="5em", bg="purple"),
    rx.chakra.box(height="5em", width="5em", bg="tomato"),
    rx.chakra.box(height="5em", width="5em", bg="orange"),
    rx.chakra.box(height="5em", width="5em", bg="yellow"),
    columns=[3],
    spacing="4",
)

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

API Reference

ResponsiveGrid

A responsive grid component.

Prop	Type	Default Value	Values
`auto_columns`	str
`auto_flow`	str
`auto_rows`	str
`column`	str
`row`	str
`columns`	List
`min_child_width`	str
`spacing`	str
`spacing_x`	str
`spacing_y`	str
`template_areas`	str
`template_columns`	str
`template_rows`	str

Event Triggers

See the full list of default event triggers

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Responsive Grid

API Reference

ResponsiveGrid