Bento & Layout

Masonry Column Layout

Pinterest-style masonry grid using native CSS multi-column layout with break-inside-avoid, zero JS.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add masonry-columns

Built for astro.

Full docs for Masonry Column Layout →

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.0

Masonry Column Layout

Short note

A longer card with more to say about the release

Mid-length update

Full changelog entry with several lines of supporting copy

Quick fix

Feature announcement

Props

Name	Type	Required	Default
as	'div' \| 'section'	No	'div'
columns	{ base?: number; sm?: number; md?: number; lg?: number }	No	{ base: 1, sm: 2, lg: 3 }
gap	4 \| 5 \| 6 \| 8	No	6
className	string	No	''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/masonry-columns/MasonryColumns.astro

Using the Masonry Column Layout component

Install it with velocityx add masonry-columns. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Masonry Column Layout

Props

File this creates

Using the Masonry Column Layout component

Related components