Masonry
A masonry layout container based on CSS columns; child items are automatically distributed across columns without being split.
Basic Usage
Four-column masonry
Short card
This is taller content, showing how cards of different heights are staggered in a masonry layout; a few more lines are added to increase the height.
A second paragraph.
Medium height
Additional notes.
Another short card
A taller card with multiple lines of description and a list.
- Point 1
- Point 2
Normal card
An example in the last column.
Columns and Gap
Three columns, larger gap
Item A
Item B; the masonry auto-fills when heights differ.
Item C
Item D
No Children
Empty container
With no children it renders an empty container without errors.
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
columns | Number of columns; invalid values (non-positive integers / decimals / 0 / negatives) fall back to 1 | — | — |
gap | Column gap (px); invalid values fall back to the default | — | — |
Slots
| Name | Description |
|---|---|
| default | Masonry child items; children automatically get break-inside: avoid |
Part: ::part(masonry) the masonry container.