Masonix
Responsive masonry layouts for React.
A small set of components for CSS masonry, measured shortest-column placement, and virtualized feeds. Supports responsive columns, server rendering, and custom card markup.
One API, three layout strategies.
Choose a component based on how items should be placed and how much content needs to be rendered.
Virtualize large masonry feeds.
This example contains 10,000 items. Jump through the dataset while Masonix limits rendering to the visible window and its overscan.
Layout behavior without a design system.
Masonix handles placement, measurement, and windowing. It does not prescribe card markup, styling, imagery, or interaction.
View the examplesimport { MasonryBalanced } from 'masonix';
export function Gallery({ photos }) {
return (
<MasonryBalanced
items={photos}
columnWidth={260}
maxColumns={4}
gap={16}
getItemHeight={(photo, _index, width) =>
width * (photo.height / photo.width)
}
itemKey={(photo) => photo.id}
render={PhotoCard}
/>
);
}Guides for production use.
Read about server rendering, responsive behavior, accessibility, and performance before choosing implementation defaults.
Server rendering
Stable defaults and known dimensions for predictable hydration.
Accessibility
List semantics, source order, and optional count announcements.
Responsive layouts
Use breakpoint maps or let the container determine column count.
Performance
Choose measurement and virtualization only when the workload needs it.
Build your first masonry grid.
Install Masonix and start with the CSS-first component. Measurement and virtualization are available when the workload requires them.