Masonry

Overview

Masonry renders a pure CSS waterfall layout with balanced variable-height columns. It uses CSS columns, so DOM and screen-reader order remain top-to-bottom through each column rather than left-to-right across visual rows.

Usage

<script lang="ts">
  import { Masonry } from '@lostgradient/cinder/masonry';
</script>

<Masonry columns="3" gap="var(--cinder-space-4)">
  <article>Short card</article>
  <article>Much taller card content</article>
  <article>Medium card</article>
</Masonry>

Live preview

Short note.

Longer content with enough copy to create a taller card. CSS columns balance the available vertical space without JavaScript measurement.

Medium content with a couple of lines.

Another taller item that demonstrates variable height placement across columns.

When to use

Use when

Displaying cards, images, or panels with uneven heights where CSS column order is acceptable.

Avoid when

Items have equal heights - use grid-list instead. Use Grid List instead
Left-to-right row reading order matters - use grid instead. Use Grid instead

Examples

Variable-height cards

CSS columns pack uneven cards into a masonry-style waterfall while keeping DOM order intact.

Props

Props for masonry
Name	Type	Default	Description
`columns`	`text`		CSS column count value.
`gap`	`text`		Gap between columns and between direct children.
`as`	`'article'\|'aside'\|'div'\|'footer'\|'header'\|'main'\|'nav'\|'section'` 2 more members `\|'ul'\|'ol'`	`'div'`	Rendered HTML tag. Constrained to layout-safe container elements; void elements such as `img`, `input`, `br`, and `hr` are excluded.
`children` required	`snippet`		Masonry contents.