Demos — <pattern-grid>

1. Hello rainbow

A 64-cell grid with HSL hues driven by sibling-index() and sibling-count().

<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>

2. Concentric rotation

32 cells stacked in the same grid cell, each smaller and more rotated than the last. No JS animation — pure CSS.

<pattern-grid cells="32"></pattern-grid>

<style>
  pattern-grid {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
  }
  pattern-grid > i {
    grid-area: 1 / 1;
    width: calc(100% * sibling-index() / sibling-count());
    aspect-ratio: 1;
    border: 1px solid hsl(calc(sibling-index() * 11) 70% 60%);
    border-radius: 30%;
    transform: rotate(calc(sibling-index() * 5deg));
  }
</style>

3. 2D coordinates from the sibling shim

With shim="sibling", the component sets typed integer custom properties (--i per cell, --n on the host). That lets mod() and floor() recover (x, y) coordinates reliably. Color shifts on a diagonal.

<pattern-grid cells="16x16" shim="sibling"></pattern-grid>

<style>
  /* Register so CSS math types numerically */
  @property --idx { syntax: '<integer>'; inherits: false; initial-value: 0; }
  @property --x   { syntax: '<integer>'; inherits: false; initial-value: 0; }
  @property --y   { syntax: '<integer>'; inherits: false; initial-value: 0; }

  pattern-grid > i {
    --idx: calc(var(--i) - 1);
    --x: mod(var(--idx), var(--pg-cols));
    --y: calc((var(--idx) - var(--x)) / var(--pg-cols));
    background: hsl(
      calc((var(--x) + var(--y)) * 8) 70% 50%
    );
  }
</style>

4. Template cells

Provide a <template> child and each cell becomes a clone of its content. Buttons here, but it can be anything — links, images, custom elements.

<pattern-grid cells="4x4">
  <template>
    <button class="tile">+</button>
  </template>
</pattern-grid>

5. Hand-authored cells (no JS required)

When the child count already matches cols × rows, JS leaves them alone. This block also renders correctly with JavaScript disabled.

<pattern-grid cols="3" rows="2">
  <a href="#one"></a>
  <a href="#two"></a>
  <a href="#three"></a>
  <a href="#four"></a>
  <a href="#five"></a>
  <a href="#six"></a>
</pattern-grid>

6. Vanilla Breeze tokens

Because cells live in the light DOM, any inherited custom properties cascade in. Here the design tokens come from a parent.

/* VB tokens cascade into light DOM cells */
pattern-grid > i {
  background: hsl(
    calc(sibling-index() / sibling-count() * 360)
    var(--vb-color-saturation)
    var(--vb-color-lightness)
  );
  border-radius: var(--vb-radius-sm);
}

7. Sibling shim — works in Firefox today

Setting shim="sibling" writes --i on each cell and --n on the host, so author CSS works in browsers that don't yet ship sibling-index(). Author CSS can prefer the native function with a fallback.

With shim="sibling":

Without shim:

<pattern-grid cells="36" shim="sibling"></pattern-grid>

<style>
  pattern-grid > i {
    /* prefer shim, fall back to native */
    --idx: var(--i, sibling-index());
    background: hsl(calc(var(--idx) * 10) 70% 50%);
  }
</style>

8. Seeded randomness

Wrap a <pattern-grid> in <seed-context> and the component writes --rand-0...--rand-7 floats and matching --randi-0...--randi-7 integers on each cell, derived from a seeded mulberry32 PRNG. Same seed reproduces the same randoms across reloads.

<seed-context seed="hello">
  <pattern-grid cells="8x8"></pattern-grid>
</seed-context>

<style>
  pattern-grid > i {
    background: hsl(
      calc(var(--rand-0) * 360deg) 70% 50%
    );
  }
</style>

9. API explorer

Drag the sliders to mutate cols and rows attributes live. The component listens to attribute changes and regenerates cells.

cols 8 rows 8

10. The render event

Every regeneration fires a pattern-grid:render event with the new { cols, rows, total } in its detail. Useful for tying side effects to grid changes.

document.querySelector('pattern-grid')
  .addEventListener('pattern-grid:render', (e) => {
    console.log('Regenerated:', e.detail);
    // e.detail === { cols: 8, rows: 8, total: 64 }
  });