alignItems? | AlignItems | 'stretch' | Alignment of items along the column axis (vertical). |
as? | keyof IntrinsicElements | 'div' | HTML element to render as the grid container. |
breakThreshold? | number | 150 | Minimum pixels required per "1fr unit". Used to determine when columns can fit in the container. |
children? | ReactNode | - | Child elements to render inside the grid. |
cols? | string | number | "auto" | Column configuration: - "auto" (default): Uses CSS auto-fit with breakThreshold - number (e.g., 3): Fixed column count that collapses when space is insufficient - string with fr units (e.g., "1fr 2fr 1fr"): Template that collapses proportionally |
columnGap? | string | number | - | Gap between columns. Overrides gap for column spacing. |
dense? | boolean | false | When true, uses grid-auto-flow: dense for tighter packing. Note: This may visually reorder items (not DOM order). |
gap? | string | number | 12 | Gap between all grid items (both column and row). Accepts a number (pixels) or CSS string. |
justifyItems? | JustifyItems | 'stretch' | Alignment of items along the row axis (horizontal). |
maxCols? | number | - | Maximum number of columns (only applies when cols="auto"). |
minCols? | number | 1 | Minimum number of columns. Grid never collapses below this. |
rowGap? | string | number | - | Gap between rows. Overrides gap for row spacing. |