//
A comprehensive grid layout system for complex responsive and Bento layouts.
bun add xiod-ui1import { Grid, GridItem } from "xiod-ui/grid";1<Grid>2 <GridItem />3</Grid>| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
align | "center"| "start"| "end"| "stretch"| "baseline"| null| undefined | - | |
rows | 1| "none"| 2| 3| 4| 5| 6| 7| 8| 9| 10| 11| 12| "subgrid"| null| undefined | - | |
columns | 1| "none"| 2| 3| 4| 5| 6| 7| 8| 9| 10| 11| 12| "subgrid"| null| undefined | - | |
flow | "col"| "row"| "dense"| "row-dense"| "col-dense"| null| undefined | - | |
justify | "center"| "start"| "end"| "stretch"| "between"| null| undefined | - | |
gap | "base"| "none"| "sm"| "lg"| "md"| "xl"| null| undefined | base |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
colSpan | 1| "auto"| 2| 3| 4| 5| 6| "full"| 7| 8| 9| 10| 11| 12| null| undefined | - | |
rowSpan | 1| "auto"| 2| 3| 4| 5| 6| "full"| 7| 8| 9| 10| 11| 12| null| undefined | - | |
colStart | 1| 2| 3| 4| 5| 6| 7| 8| 9| 10| 11| 12| 13| null| undefined | - | |
colEnd | 1| 2| 3| 4| 5| 6| 7| 8| 9| 10| 11| 12| 13| null| undefined | - | |
rowStart | 1| 2| 3| 4| 5| 6| 7| 8| 9| 10| 11| 12| 13| null| undefined | - | |
rowEnd | 1| 2| 3| 4| 5| 6| 7| 8| 9| 10| 11| 12| 13| null| undefined | - |