Masonry

Packs items of uneven height into columns with no gaps under the short ones.

Example

View Code 
<div class="masonry" data-min="xs" data-columns="3">
    <img src="one.jpg" alt="A tall waterfall">
    <img src="two.jpg" alt="A wide valley">
    <img src="three.jpg" alt="A square pond">
    <img src="four.jpg" alt="A tall pine">
    <img src="five.jpg" alt="A wide ridge">
</div>

When to use it

A wall of photos, cards of unpredictable length, quotes of different sizes: anything where equal rows would leave holes under the short items. If the items are roughly equal, use a grid and keep the rows.

How it works

Everywhere, the masonry is a multi-column layout: data-min is the column width, data-columns caps the count, and each item is told not to break across columns. In that form items flow down the first column, then the next, so the reading order runs in columns. Where the browser supports native masonry, the same element becomes a grid with masonry rows, items read across as in a grid, and the gap is a real gap. Both forms use the same attributes and the same tokens, so nothing in your markup changes when a browser gains support. In the multi-column fallback the last item of each column keeps its bottom gap, so the fallback is one gap taller than the native form.

Why this name

The word everyone already uses for the brick-wall arrangement. Foundation 6 had nothing for it; people reached for a JavaScript library, which is the thing this layout replaces.

Attributes

Attribute Type Values Default Description
data-min enum none, 2xs, xs, sm, md, lg, xl, 2xl xs The narrowest a column may be. none is meant to be paired with data-columns, which then gives an exact count; alone it gives a single full-width column.
data-columns enum 1, 2, 3, 4, 5, 6 The most columns allowed. Fewer appear when the container cannot fit that many at data-min.
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl md Space between columns and between items.

Children

  • > *: at least 2. The items. Each keeps its own height.

Tokens

Token Description
--yeti-width-xs The default minimum column width.
--yeti-space-md The default gap.
Internal tokens (may change between minor versions) - `--_yeti-gap` - `--_yeti-min` - `--_yeti-column-count` - `--_yeti-column-cap`

Accessibility

  • In browsers without native masonry, items read down each column and then across. Keep the source order meaningful on its own.

Browser support

  • Used without guards: multi-column layout, break-inside
  • Behind @supports: grid-template-rows: masonry (add a display: grid-lanes guard when its companion properties settle)

JavaScript

None. This component is CSS only.

Available since 7.0.0.