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.

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

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

rc.ResponsiveGrid

A responsive grid component.

Prop	Type \| Values	Default
`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