alignItems? | AlignItems | Alignment of items along the column axis (vertical). Default 'stretch' |
as? | keyof IntrinsicElements | HTML element to render as the grid container. Default 'div' |
breakThreshold? | number | Minimum pixels required per "1fr unit". Used to determine when columns can fit in the container. Default 150 |
children? | ReactNode | Child elements to render inside the grid. |
className? | string | Optional CSS class name for the grid container. |
cols? | string | number | 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 Default "auto" |
columnGap? | string | number | Gap between columns. Overrides gap for column spacing. |
dense? | boolean | When true, uses grid-auto-flow: dense for tighter packing. Note: This may visually reorder items (not DOM order). Default false |
gap? | string | number | Gap between all grid items (both column and row). Accepts a number (pixels) or CSS string. Default 12 |
justifyItems? | JustifyItems | Alignment of items along the row axis (horizontal). Default 'stretch' |
maxCols? | number | Maximum number of columns (only applies when cols="auto"). |
minCols? | number | Minimum number of columns. Grid never collapses below this. Default 1 |
rowGap? | string | number | Gap between rows. Overrides gap for row spacing. |
style? | CSSProperties | Additional inline styles for the grid container. |