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,
)Used as a child of Grid to control the span, and start positions within the grid.
Event Triggers
See the full list of default event triggersDid you find this useful?
No
Yes
