grid

A CSS grid container: give it a column count or template and children place themselves into cells.

Example

grid

phone

SPEC.JSONCopy

{ "id": "g", "layout": { "_id": "root", "type": "grid", "columns": 2, "gap": 12, "padding": 16, "children": [ { "_id": "c1", "type": "column", "children": [ { "_id": "t1", "type": "text", "content": "One" } ] }, { "_id": "c2", "type": "column", "children": [ { "_id": "t2", "type": "text", "content": "Two" } ] }, { "_id": "c3", "type": "column", "children": [ { "_id": "t3", "type": "text", "content": "Three" } ] }, { "_id": "c4", "type": "column", "children": [ { "_id": "t4", "type": "text", "content": "Four" } ] } ] } }

RENDERED OUTPUTFRAMEWERK RENDERER

One

Two

Three

Four

States

Child spans (span, rowSpan, area) and grid-level overrides. Common to every node: hover / press / focus CSS bags, showWhen / hideWhen, animate.

Stability

This node type is part of the format contract: adding an optional prop is additive; removing the node or narrowing an existing prop is breaking. Prop tables are generated from the schema; this page carries the prose.