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

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	Required	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'\|'ul'\|'ol'`	`'div'`		Rendered HTML tag. Constrained to layout-safe container elements; void elements such as `img`, `input`, `br`, and `hr` are excluded.
`children`	`snippet`		req	Masonry contents.