realtouseef / masonry-layout

Pinterest like Masonry Layout

Masonry layout 📌

Pinterest like Masonry Layout built with React, TypeScript, and CSS

Masonry Component

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.

Breakpoints & Width

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%

Width

How to use

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} />;
};

TODOs

• find a better way to equally distribute the items in each array

Issue

If you find any issues or bugs, please report them here.