Grid

Preview

Grid is a CSS Grid layout primitive supporting responsive columns and gap. The Root is a CSS grid container and Item is a grid cell.

#Usage

Compose Root and Item. Root establishes the grid container and each Item is a grid cell.

import * as Grid from "@solidiom/grid"

;<Grid.Root>
  <Grid.Item>One</Grid.Item>
  <Grid.Item>Two</Grid.Item>
  <Grid.Item>Three</Grid.Item>
</Grid.Root>

#Installation

Install the package with pnpm add @solidiom/grid. The package requires compatible solid-js and @solidjs/web peer dependencies.

#Parts

grid exposes 2 parts:

• Root — the CSS grid container.
• Item — a grid cell within the container.

#Styling

grid carries data-scope="grid" and data-part attributes on each part for CSS/recipe targeting.

#Keyboard & behavior

This primitive has no keyboard interaction of its own.

#Composition

Place any primitives inside Item cells to lay them out on a responsive grid.

#SSR and hydration

Grid renders static HTML and requires no hydration.

solidiom add grid