Primitive contract

Grid

Arranges repeated peers with one intrinsic mode and a restrained set of explicit column modes.

Repeated peer-item composition · @sanchika/primitives

Purpose and semantics

Arranges repeated peers with one intrinsic mode and a restrained set of explicit column modes.

Recommended semantic: Use ul or ol for lists; otherwise choose section or div based on the content relationship.

Anatomy

root

The peer-item grid.

items

Repeated peers with independent content.

Finite variants and important states

Variant · columns: auto, 2, 3
Variant · gap: sm, md, lg
Required states: default
Class hooks: .sk-grid · .sk-grid-columns-auto · .sk-grid-columns-2 · .sk-grid-columns-3 · .sk-grid-gap-sm · .sk-grid-gap-md · .sk-grid-gap-lg

Composed synthetic exemplar

Rendered state matrix

Grid: 1 required state

Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.

defaultSettled and available for its documented job.

…

Accessibility and consumer responsibility

Keyboard and screen reader

Grid must not change focus order.
Retain list semantics for repeated list items.

Consumer owns

Choose semantic list markup when applicable
Keep item order meaningful

Mobile

Explicit columns collapse to one
Intrinsic mode never forces horizontal overflow

Reduced motion and forced colors

No override is needed because the primitive adds no motion.

Grid adds no authored color or boundary.

Compact API reference

Package: @sanchika/primitives
CSS: @sanchika/primitives/styles.css
Contract: primitiveSpecs.find((contract) => contract.name === "Grid")
Primary class: .sk-grid