React Masonry Flex

A simple and efficient Masonry layout component for React.

Installation

npm install react-masonry-flex

yarn add react-masonry-flex

Basic Usage

import Masonry from 'react-masonry-flex';

function App() {
  return (
    <Masonry columns={4} spacing={10}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      {/* Add as many items as needed */}
    </Masonry>
  );
}

Responsive Grid

const breakpoints = {
  350: 1, // When less than 350px, 1 column
  750: 2, // When less than 750px, 2 columns
  1200: 3, // When less than 1200px, 3 columns
  default: 4, // When 1200px or more, 4 columns
};
<Masonry columns={breakpoints} spacing={16}>
  {/* Add as many items as needed */}
</Masonry>;

Key Props

| Property | Type | Default | Description | | ----------- | -------------------- | ------- | -------------------------- | | columns | number | Breakpoint | 4 | Number of columns | | spacing | number | Breakpoint | 10 | Spacing between items (px) | | className | string | | Additional CSS class |

Browser Support

• Chrome, Firefox, Safari, Edge latest versions

License

MIT