React masonry components
Layouts that feel simple until your feed gets serious.
Masonix gives you responsive masonry, measured balanced columns, and virtualized feeds behind one small React API.
3
layout modes
10k
item playground preset
5.37 kB
virtual bundle
Choose by workload
One library, three layout strategies.
Start with the simple component, move to measured placement when visual balance matters, and switch to virtualization when rendering everything starts costing scroll performance.
First working example
Bring your own cards. Masonix handles the placement.
The docs include live examples, accessibility guidance, virtual feed recipes, and a full playground for tuning layout behavior.
import { Masonry } from 'masonix';
export function Gallery({ photos }) {
return (
<Masonry
items={photos}
columns={{ 0: 1, 720: 2, 1080: 3 }}
gap={16}
itemKey={(photo) => photo.id}
render={({ data }) => <img src={data.src} alt={data.alt} />}
/>
);
}