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.

rc.grid(
    rc.grid_item(row_span=1, col_span=1, bg="lightgreen"),
    rc.grid_item(row_span=1, col_span=1, bg="lightblue"),
    rc.grid_item(row_span=1, col_span=1, bg="purple"),
    rc.grid_item(row_span=1, col_span=1, bg="orange"),
    rc.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.

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

rc.Grid

A grid component.

Prop	Type \| Values	Default
`auto_columns`	`str`
`auto_flow`	`str`
`auto_rows`	`str`
`column`	`str`
`row`	`str`
`template_columns`	`str`
`template_rows`	`str`

Event Triggers

See the full list of default event triggers

rc.GridItem

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

Prop	Type \| Values	Default
`area`	`str`
`col_end`	`str`
`col_start`	`int`
`col_span`	`int`
`row_end`	`str`
`row_start`	`int`
`row_span`	`int`

Event Triggers

See the full list of default event triggers