Masonry layout

Pack cards of different heights into columns.

Live preview Try the effect

Project overview Projects

◒AnalyticsUpdated today

◫Design systemUpdated today

✳WorkspaceUpdated today

◇ProjectsUpdated today

◐MarketingUpdated today

▦Content hubUpdated today

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Pack cards of different heights into columns. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Images, inspiration collections and uneven content.

Related concepts

Unlike a regular grid, row edges do not align. Preserve a logical reading order.

Describe this effect

Output language

Use a responsive masonry layout with consistent column gaps and natural card heights.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.