layout — wyrd.component.grid
Layout primitive that arranges child content into a fixed number of equal-width columns using the normative Layout DSL spacing scale.
Install @wyrd-company/react or the Flutter package and use it directly —
your DESIGN.md does the styling.
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity: name: Grid tag: wyrd-grid package: wyrd.component.grid title: Grid summary: Layout primitive that arranges child content into a fixed number of equal-width columns using the normative Layout DSL spacing scale.relationships: related-to: - layout-dsl - puck-layout-authoring - flexiblebox - quality-parity-and-gatesclassification: category: layout composition: single-slot interactive: falsetarget-strategy: react: required flutter: requiredsurface: properties: - name: columns type: kind: integer minimum: 1 maximum: 12 required: true serializable: true summary: Fixed number of equal-width columns. - name: gap type: kind: integer minimum: 0 maximum: 8 required: false default: 0 serializable: true summary: Space between grid cells as an index into the normative Layout DSL spacing scale. slots: - name: content content: true required: true cardinality: one-or-many accepts: - component - content summary: Child layout nodes arranged row-major into the grid. events: [] states: [] parts: - name: root summary: CSS grid layout root. slots: - contentmessages: []obligations: accessibility: role: none keyboard: [] semantics: - Preserves child order and semantics without adding interactive behavior. behavior: model: stateless interactions: [] hostEffects: [] conditions: - rtl - density-compact - text-expansion - safe-area sdui: status: serializable serializableProperties: - columns - gap serializableSlots: - content eventBindings: [] notes: Grid lowers to the Layout DSL Grid node during Puck-to-SDUI normalisation.examples: - name: two-column state: default properties: columns: 2 gap: 2 slots: content: Foundations | Components | Patterns | Tooling - name: three-column-gap state: default properties: columns: 3 gap: 4 slots: content: Design | Build | Validate | Document | Publish | Observe - name: twelve-column state: default properties: columns: 12 gap: 1 slots: content: "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12"overrides: react: slots: content: children flutter: slots: content: child
Generated from the contract's examples block.
Previews are the published @wyrd-company/react component, themed by the
brand's role tokens — flip the site's light/dark toggle and they follow.
import { WyrdGrid } from "@wyrd-company/react";
<WyrdGrid columns={2} gap={2}>
Foundations | Components | Patterns | Tooling
</WyrdGrid>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdGrid(
columns: 2,
gap: 2,
child: Text('Foundations | Components | Patterns | Tooling'),
)import { WyrdGrid } from "@wyrd-company/react";
<WyrdGrid columns={3} gap={4}>
Design | Build | Validate | Document | Publish | Observe
</WyrdGrid>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdGrid(
columns: 3,
gap: 4,
child: Text('Design | Build | Validate | Document | Publish | Observe'),
)import { WyrdGrid } from "@wyrd-company/react";
<WyrdGrid columns={12} gap={1}>
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
</WyrdGrid>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdGrid(
columns: 12,
gap: 1,
child: Text('1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12'),
)| Name | Type | Default | Summary |
|---|---|---|---|
columns | integer | undefined | Fixed number of equal-width columns. |
gap | integer | 0 | Space between grid cells as an index into the normative Layout DSL spacing scale. |
| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
content | one-or-many | component, content | Child layout nodes arranged row-major into the grid. |
From the contract's accessibility obligations. Role none
Status: serializable. Grid lowers to the Layout DSL Grid node during Puck-to-SDUI normalisation.
| Serializable | Members |
|---|---|
| Properties | columns, gap |
| Slots | content |
| Events | — |