https://github.com/hellraiserrob/masonry

A Pinterest style masonry library
https://github.com/hellraiserrob/masonry

layout masonry pinterest vanilla-javascript

Last synced: 7 months ago
JSON representation

A Pinterest style masonry library

• Host: GitHub
• URL: https://github.com/hellraiserrob/masonry
• Owner: hellraiserrob
• Created: 2024-06-17T15:05:41.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-07-06T10:01:00.000Z (over 1 year ago)
• Last Synced: 2025-01-22T04:42:35.204Z (9 months ago)
• Topics: layout, masonry, pinterest, vanilla-javascript
• Language: HTML
• Homepage: https://hellraiserrob.github.io/masonry/
• Size: 140 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
[![Masonry banner](./.github/assets/banner.svg)](https://hellraiserrob.github.io/masonry)

# Masonry

An example of a beautiful Pinterest style layout library, available for you to take and use as you wish in your projects.

[Demo](https://hellraiserrob.github.io/masonry/)

[![Masonry screenshot](./.github/assets/screenshot.jpg)](https://hellraiserrob.github.io/masonry)

## Features

- Vanilla Typescript

- Light & Responsive

- Use in your projects or as learning material

## Setup

Pass a Breakpoint[] to configure the columns and gutter for different breakpoints

|             | Description | Type    | 

| ----------- | ----------- | ------- | 

| thresold    | The pixel >= this should apply to  | number |

| columns    | The number of columns  | number |

| gutter    | The pixel gap between the cards  | number |

e.g.

```javascript

const options:Breakpoint[] = [

  {

    threshold: 0,

    columns: 1,

    gutter: 32,

  },

  {

    threshold: 600,

    columns: 3,

    gutter: 32,

  },

  {

    threshold: 1000,

    columns: 4,

    gutter: 32,

  }

];

setup(options)

```