Grid

Read as Markdown

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

Grid uses GridProps and GridStyle; children may provide GridItemStyle. It accepts recursive PibblNode children and places explicit tracks with finite allocation. CSS auto-placement, advanced intrinsic sizing, and scrolling are not supported.

<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.

API details from source

Describes explicit Grid layout for JSX or createElement authoring.

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

Related API: Grid, PibblPrimitiveComponent, GridProps, PrimitiveInput, 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

GridStyle

View source — packages/core/src/lib/layout/grid.ts:174

Implementation guidance for agents

Read the Drawing, layout, and effects companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

• Grid and responsive style: Place marks on explicit grid tracks and apply a local width rule. Plain source

Documentation version

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