Pinterest like Masonry Layout built with React, TypeScript, and CSS
The Masonry Component takes in 2 params data, column
- Data is required and should be an array of object with
src
inside - column sets the number of columns you want, you can provide an object with the
xs, sm, md, lg, xl, xxl
and define the number of columns you want in each breakpoint.
PS: if the innerWidth of the window is less than 640px
it is xs
, same for the rest of the values and if the width is great than 1536px
, it is xxl
.
breakpoints | value | width |
---|---|---|
less than 640 | xs | 50% |
< 768 | sm | 50% |
< 1024 | md | 40% |
< 1280 | lg | 30% |
< 1536 | xl | 25% |
greater than 1536 | xxl | 25% |
Provide an object with the number of columns you want to display in each breakpoint.
import { Masonry } from '@tx666/masonry';
const Gallery = () => {
const columns = {
xs: 2,
sm: 2,
md: 3,
lg: 3,
xl: 4,
xxl: 5,
};
const data = [{ src: 'link to your image' }, { src: 'link to your image' }];
return <Masonry data={data} column={columns} />;
};
- find a better way to equally distribute the items in each array
If you find any issues or bugs, please report them here.