Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Layout

/

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.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],
)

A responsive grid component.

PropTypeDescriptionValues
auto_columnsstr

Shorthand prop for gridAutoColumns to provide automatic column sizing based on content. Learn more here

auto_flowstr

Shorthand prop for gridAutoFlow to specify exactly how auto-placed items get flowed into the grid. Learn more here

auto_rowsstr

Shorthand prop for gridAutoRows. Learn more here

columnstr

Shorthand prop for gridColumn. Learn more here

rowstr

Shorthand prop for gridRow. Learn more here

columnsList

A list that defines the number of columns for each breakpoint.

min_child_widthstr

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.

spacingstr

The gap between the grid items

spacing_xstr

The column gap between the grid items

spacing_ystr

The row gap between the grid items

template_areasstr

Shorthand prop for gridTemplateAreas Learn more here

template_columnsstr

Shorthand prop for gridTemplateColumns. Learn more here

template_rowsstr

Shorthand prop for gridTemplateRows. Learn more here

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting