Components

Bento Masonry

Masonry-style asymmetric grids via .wckd-bento on the usual Grid, mixed-height images and copy tiles that reflow at kit breakpoints.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Photo masonry demo

Mixed image heights in one grid; wckd-ui.js lays out masonry cells from the column children.

Bento packs mixed-height cells with JS.

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

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

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

Fits the flows described in the examples here when you can match the same structure.
Start from the default markup, then add layout, spacing, and surfaces with style guide utilities.
Narrow the viewport: many components change layout (stack, compact nav, or accordion) at the kit breakpoints.

Implementation notes

Until `.ready`, cells stay in normal CSS grid flow so the section keeps height and content below does not jump; the first JS pass then switches to absolute masonry (tile positions may adjust within that footprint).
Bento reads `span-*`, `mobile-span-*` (≤590px), and `desktop-span-*` (≥900px) on each `.column` like the grid utilities: cell width and masonry placement span that many tracks; spans wider than the current track count are clamped.
For bento, the practical configuration knobs are column count and gap scale.
Use mixed media heights so the masonry behaviour is visible and meaningful.
Keep image aspect ratios diverse but coherent for a balanced visual rhythm.

Developer checklist

Confirm wckd-ui.css and wckd-ui-components.css (and the wckd-ui.js bootstrap from Get Started) are loaded when this pattern uses interactivity.
Keep the documented class names and DOM shape so the default wckd-ui.js bootstrap (window.WCKD_BOOTSTRAP / window.WCKD_COMPONENTS) can initialise the right module for the root.
Re-test keyboard, focus, and at least one small viewport after custom CSS or extra interactive children.

← All components