79Gallery

A grid of figures. Auto-fills to the space; --two and --three lock counts for curated sets. Captions stay under each frame — a gallery is figures, not a mosaic wall.

Use it for

Screenshot sets in docs and lessons
Curated pairs/trios of course art

Not for

A feed of cards — Card grid
One image — Image

Auto grid

Setup

Trail

Deploy

markup

<div class="ns-gallery" style="inline-size:100%">
  <figure class="ns-figure ns-figure--4x3"><span class="ns-figure__frame"><span class="ns-ph" aria-hidden="true"></span></span><figcaption>Setup</figcaption></figure>
  <figure class="ns-figure ns-figure--4x3"><span class="ns-figure__frame"><span class="ns-ph" aria-hidden="true"></span></span><figcaption>Trail</figcaption></figure>
  <figure class="ns-figure ns-figure--4x3"><span class="ns-figure__frame"><span class="ns-ph" aria-hidden="true"></span></span><figcaption>Deploy</figcaption></figure>
</div>

Two-up

Locked pair — before/after, light/dark.

Before

After

markup

<div class="ns-gallery ns-gallery--two" style="inline-size:100%">
  <figure class="ns-figure ns-figure--16x9"><span class="ns-figure__frame"><span class="ns-ph" aria-hidden="true"></span></span><figcaption>Before</figcaption></figure>
  <figure class="ns-figure ns-figure--16x9"><span class="ns-figure__frame"><span class="ns-ph" aria-hidden="true"></span></span><figcaption>After</figcaption></figure>
</div>

Accessibility contract

Each image keeps its own alt; the gallery adds nothing to announce