# @askrjs/themes/grid

> Published API exports for @askrjs/themes/grid.

Source: [https://askrjs.com/docs/reference/api/themes/grid](https://askrjs.com/docs/reference/api/themes/grid)

Status: stable. Packages: @askrjs/themes/grid.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 5 exports from the declarations shipped by @askrjs/themes.

### `Grid`

```ts
Grid: <TElement extends GridElement = "div">(props: GridProps<TElement>) => JSX.Element
```

CSS grid layout primitive: turns `columns`/`gap`/`align` (each optionally responsive) into generated grid-template styles, rendering as `<div>` by default.

### `GridAlign`

```ts
GridAlign: "start" | "center" | "end" | "stretch"
```

`align-items` value applied to a {@link Grid }.

### `GridColumns`

```ts
GridColumns: number | string
```

Column definition for {@link Grid }: a track count or a raw `grid-template-columns` string.

### `GridElement`

```ts
GridElement: "div" | "section" | "ul"
```

Element tags {@link Grid } can render as via its `as` prop.

### `GridProps`

```ts
GridProps: GridIntrinsicProps<TElement> & {
  as?: TElement;
  columns?: ResponsiveValue<GridColumns>;
  gap?: ResponsiveValue<BlockSpace>;
  align?: ResponsiveValue<GridAlign>;
  children?: unknown;
  ref?: Ref<HTMLElement>;
}
```

Props for the {@link Grid } component, specialized for a given {@link GridElement} `TElement`.

- `align`: align?: ResponsiveValue<GridAlign> | undefined;

- `as`: as?: TElement | undefined;

- `children`: children?: unknown;

- `columns`: columns?: ResponsiveValue<GridColumns> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `ref`: ref?: Ref<HTMLElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/form/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/heading/index.md)