Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Layout

/

Grid

A primitive useful for grid layouts. Grid is Box with display, grid and it comes with helpful style shorthand. It renders a div element.

rx.chakra.grid(
    rx.chakra.grid_item(
        row_span=1, col_span=1, bg="lightgreen"
    ),
    rx.chakra.grid_item(
        row_span=1, col_span=1, bg="lightblue"
    ),
    rx.chakra.grid_item(
        row_span=1, col_span=1, bg="purple"
    ),
    rx.chakra.grid_item(
        row_span=1, col_span=1, bg="orange"
    ),
    rx.chakra.grid_item(
        row_span=1, col_span=1, bg="yellow"
    ),
    template_columns="repeat(5, 1fr)",
    h="10em",
    width="100%",
    gap=4,
)

In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the col_span prop to the GridItem component to span across columns and also pass the row_span component to span across rows. You also need to specify the template_columns and template_rows.

rx.chakra.grid(
    rx.chakra.grid_item(
        row_span=2, col_span=1, bg="lightblue"
    ),
    rx.chakra.grid_item(col_span=2, bg="lightgreen"),
    rx.chakra.grid_item(col_span=2, bg="yellow"),
    rx.chakra.grid_item(col_span=4, bg="orange"),
    template_rows="repeat(2, 1fr)",
    template_columns="repeat(5, 1fr)",
    h="200px",
    width="100%",
    gap=4,
)

A 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

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

Used as a child of Grid to control the span, and start positions within the grid.

PropTypeDescriptionValues
areastr

Shorthand prop for gridArea Learn more here

col_endstr

Shorthand prop for gridColumnEnd Learn more here

col_startint

The column number the grid item should start.

col_spanint

The number of columns the grid item should span.

row_endstr

Shorthand prop for gridRowEnd Learn more here

row_startint

The row number the grid item should start.

row_spanint

The number of rows the grid item should span.

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting