Bento & Layout
Masonry Column Layout
Pinterest-style masonry grid using native CSS multi-column layout with break-inside-avoid, zero JS.
Needs a licence key —
subscribe here, then
velocityx loginonce.
Masonry Column Layout
Live preview of the Masonry Column Layout component
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
The code ships with Velocity.
Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.
Get Velocity X — from $1,250 See all packages →Using the Masonry Column Layout component
Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.
More Bento & Layout components
Browse all →Split 50/50 Section
Even two-column split section that stacks to one column on mobile, with an optional mobile reorder flag.
Split 60/40 with Sticky Side
60/40 split section where one column sticks in the viewport while the other scrolls past it, desktop only.
Three-Column Feature Row
Classic three-feature row that collapses to two then one column per breakpoint.
Sticky Sidebar + Scrolling Content
Pinned sidebar with its own internal scroll next to a scrolling main content column, desktop only.
Auto-Fit Responsive Card Grid
Breakpoint-free responsive card grid using CSS grid auto-fit/minmax, column count is purely a function of container width.
Aspect-Ratio Media Box
Reserves a stable aspect ratio for media to prevent layout shift, using the native CSS aspect-ratio property.