<pattern-grid>

A vanilla web component that stamps out a CSS-Grid of empty cells and gets out of the way. Author CSS owns the visuals.

Features

Light DOM

Cells live in the same DOM as the host. Author CSS reaches pattern-grid > * directly. No ::part() contracts, no shadow boundaries.

No DSL

Two integer attributes (cols, rows) and an optional <template> slot. Style with real CSS using sibling-index(), sibling-count(), trig, and custom properties.

~1 KB JS

One ES module, zero runtime dependencies, ≤80 lines. The whole point: the component shrinks as the CSS platform grows.

Progressive Enhancement

Hand-authored cells render without JS. The script only generates cells when the count doesn't already match cols × rows.

Template Cells

Drop a <template> inside and each cell becomes a clone of its content — buttons, links, custom elements, whatever you need.

Firefox Shim

Opt into shim="sibling" to get --i and --n custom properties on cells today, before sibling-index() is Baseline.

Quick Start

Drop the script tag in and you're done. The component registers itself.

<script type="module" src="https://unpkg.com/@profpowell/pattern-grid"></script>

<pattern-grid cells="8x8"></pattern-grid>

<style>
  pattern-grid {
    display: grid;
    grid-template-columns: repeat(var(--pg-cols), 1fr);
  }
  pattern-grid > i {
    aspect-ratio: 1;
    background: hsl(calc(sibling-index() / sibling-count() * 360) 70% 50%);
  }
</style>

For npm-managed projects:

npm install @profpowell/pattern-grid

Suite

Part of the ProfPowell web component suite — small, composable, vanilla custom elements.