# Grid

```ts
import { Grid, Rectangle } from "@pibbl/core";
```

`Grid` uses [`GridProps`](/reference/types/layout/#gridprops) and [`GridStyle`](/reference/types/layout/#gridstyle); children may provide [`GridItemStyle`](/reference/types/layout/#griditemstyle).
It accepts recursive [`PibblNode`](/reference/types/elements-components/#pibblnode) children and places explicit tracks with finite
allocation. CSS auto-placement, advanced intrinsic sizing, and scrolling are
not supported.

```tsx
<Grid
  style={{
    width: 240,
    height: 120,
    gridTemplateColumns: ["1fr", "1fr"],
    gridTemplateRows: ["1fr"],
  }}
>
  <Rectangle style={{ width: "auto", height: "auto", fill: "#2563eb" }} />
  <Rectangle style={{ width: "auto", height: "auto", fill: "#f59e0b" }} />
</Grid>
```

Explore the [Grid live example](/playground/#/examples/layout/grid).

## API details from source

<span id="api-Grid"></span>

Describes explicit Grid layout for JSX or createElement authoring.

```ts
Grid: PibblPrimitiveComponent<GridProps, PrimitiveInput<GridProps, GridStyle>>
```

Related API: [Grid](/reference/components/grid/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [GridProps](/reference/types/layout/#gridprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [GridStyle](/reference/types/layout/#gridstyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[GridProps](/reference/types/layout/#gridprops)

[GridStyle](/reference/types/layout/#gridstyle)

[View source — packages/core/src/lib/layout/grid.ts:174](/source/packages/core/src/lib/layout/grid-ts/#L174)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Grid and responsive style](/minimal-examples/layout/grid-responsive/): Place marks on explicit grid tracks and apply a local width rule. [Plain source](/minimal/layout/grid-responsive.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.