Components

Bento Masonry

Root .wckd-bento on a .columns row; each cell is a .column (often with span-*). wckd-ui.js measures images and absolute-positions tiles. Wait for .ready on the root before screenshotting layout.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Photo masonry demo

Mixed-height cells: wckd-ui.js measures images and masonry-positions tiles; root gets .ready when layout settles.

Bento image A
Bento image B
Bento image C

Bento packs mixed-height cells with JS.

Bento image D
Bento image E

Markup

<section class="wckd-bento columns count-3 gap-s">
  <div class="column"><img src="..." alt="" /></div>
  <div class="column"><img src="..." alt="" /></div>
  <div class="column"><img src="..." alt="" /></div>
</section>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

Column count (count-*)

Primary layout control: adjust density with count-2, count-3, or count-4.

Markup

<section class="wckd-bento columns count-2 gap-s">...</section>
<section class="wckd-bento columns count-3 gap-s">...</section>
<section class="wckd-bento columns count-4 gap-s">...</section>

Gap scale (gap-*)

Secondary layout control: tighten or loosen spacing with gap-xs, gap-s, gap, gap-l.

Markup

<section class="wckd-bento columns count-3 gap-xs">...</section>
<section class="wckd-bento columns count-3 gap-l">...</section>

Column spans (span-*)

Wide cells use the same span-* utilities as the grid: bento measures width and masonry placement across multiple tracks (see implementation notes for mobile-span-* / desktop-span-*).

Single-track tile beside a span-2 hero.

Markup

<section class="wckd-bento columns count-3 gap-s">
  <div class="column span-2">… wide cell …</div>
  <div class="column">…</div>
  <div class="column span-2">…</div>
</section>

When to use

  • Editorial landing grids and launch pages with mixed media heights.

Implementation notes

  • Until .ready, cells stay in normal flow so height does not jump; first JS pass switches to absolute masonry.
  • Spans: span-*, mobile-span-* (≤590px), desktop-span-* (≥900px) on each .column. Values wider than the column count clamp.

Developer checklist

  • Keep .wckd-bento on the same element as .columns; children are .column cells only.
  • Set explicit width and height on important images so layout can measure before decode.
  • Resize the viewport once: confirm <code>.ready</code> appears and tiles do not overlap copy below.

← All components