Pinterest-Style Dynamic Layouts
Create beautiful Pinterest-style layouts with our flexible masonry grid component. Automatically positions items of varying heights for optimal space usage.
The Masonry Grid uses JavaScript to calculate optimal positioning for items of varying heights, creating a visually appealing layout that maximizes space usage. Items are positioned column by column, with each new item placed in the column with the shortest current height.
Automatic optimal item placement
Configurable columns per breakpoint
Handles image loading and layout recalculation
ResizeObserver and efficient algorithms
Optional item transition animations
Maintains semantic HTML structure
The main container that manages item positioning and responsive behavior.
import { MasonryGrid, MasonryGridItem } from '@shohojdhara/atomix';
<MasonryGrid
columns={3}
gap={16}
className="my-masonry-grid"
>
<MasonryGridItem>
<img src="image.jpg" alt="Description" />
<p>Item content</p>
</MasonryGridItem>
</MasonryGrid>Configure columns for different breakpoints:
<MasonryGrid
columns={{
xs: 1,
sm: 2,
md: 3,
lg: 4,
xl: 5
}}
gap={16}
>
{/* Items */}
</MasonryGrid>