# Grid

> Equal-width grid.

Source: https://ui.jcsoftdev.com/docs/components/grid

Equal-width grid. With `columns` the count is fixed; otherwise it is intrinsic (`auto-fill`
from `minColumnWidth`), so it reflows by the space it gets without breakpoints.

## Import

```ts
import { Grid } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/grid`.

## Usage

```tsx
<Grid look={Stack} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | `number` |  | Fixed number of equal columns. Without it the grid fits as many columns as `minColumnWidth` allows. |
| `minColumnWidth` | `string` | `"16rem"` | Narrowest a column may get before the grid drops one (any CSS length). Defaults to `16rem`. |
| `gap` | `"sm" \| "md" \| "lg" \| "xs" \| "none" \| "xl"` | `"md"` | Space between cells. Defaults to `md`. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Stack States](/storybook/?path=/story/auth-variants--stack-states)
- [Stack Solid](/storybook/?path=/story/auth-variants--stack-solid)
- [Stack Narrow](/storybook/?path=/story/auth-variants--stack-narrow)
- [Mosaic States](/storybook/?path=/story/auth-variants--mosaic-states)
- [Mosaic Solid](/storybook/?path=/story/auth-variants--mosaic-solid)
- [Mosaic Narrow](/storybook/?path=/story/auth-variants--mosaic-narrow)
- [Character States](/storybook/?path=/story/auth-variants--character-states)
- [Character Paper](/storybook/?path=/story/auth-variants--character-paper)
- [Character Narrow](/storybook/?path=/story/auth-variants--character-narrow)
- [Statement States](/storybook/?path=/story/auth-variants--statement-states)
- [Statement Solid](/storybook/?path=/story/auth-variants--statement-solid)
- [Statement Narrow](/storybook/?path=/story/auth-variants--statement-narrow)
- [By Name](/storybook/?path=/story/auth-variants--by-name)
- [Intrinsic](/storybook/?path=/story/containers-grid--intrinsic)
- [Fixed Columns](/storybook/?path=/story/containers-grid--fixed-columns)

## Source

`packages/ui/src/containers/grid/grid.tsx`