Masonry
Demo
0
4
8
1
5
9
2
6
10
3
7
11
Props
| Prop | Type | Description |
|---|---|---|
children | React.ReactNode[] (optional) | The elements to be displayed in the masonry layout. |
breakpointCols | { [key: number]: number; } | Configuration for the number of columns based on viewport width. |
classNames | { masonry?: string; column?: string } (optional) | Custom class names for the masonry grid and its columns. |
Breakpoint Columns Object
This prop allows for defining the number of columns at specific viewport widths. It accepts either a single number for a fixed number of columns or an object with keys as viewport widths and values as the number of columns.
default: Default number of columns.- Breakpoints (e.g.,
1100,700,500): Number of columns for specific viewport widths.
Styles
This component allows for custom styles via the classNames prop:
masonry: CSS class for styling the overall Masonry grid.column: CSS class for styling individual columns within the Masonry grid.