A responsive grid layout with column spans, for dashboards and bento layouts.
How items line up vertically within their cells.
columns | Responsive<NonNullable<VariantProps<typeof gridVariants>["columns"]>> | – | The number of equal columns, for every width or per breakpoint ( |
flow | "col"|"col-dense"|"dense"|"row"|"row-dense" | – | How items fill the grid: along rows or columns. The |
gap | "base"|"none"|"lg"|"md"|"sm"|"xl" | base | The space between rows and columns. |
justify | "center"|"start"|"end"|"stretch"|"between" | – | How items line up along the row within their cells. ( |
justifyContent | "center"|"start"|"end"|"stretch"|"between"|"around"|"evenly" | – | How the columns themselves are spread across the grid when they don't fill it, for example |
rows | Responsive<NonNullable<VariantProps<typeof gridVariants>["rows"]>> | – | The number of equal rows, for every width or per breakpoint. |
Accepts render, plus every native <div> attribute.
