masonry-pf

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 19 Open GitHub ↗

css masonry grid polyfill (works with react)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Package size](https://badgen.net/bundlephobia/minzip/masonry-pf@1.0.0)

# Masonry polyfill

This package provides an absolutely tiny (< 500B) polyfill for css `grid-template-rows: masonry` or `grid-template-columns: masonry`.

`registerMasonry` is a function that takes in an HTMLElement and adjusts the top margins of its children to achieve masonry layout for browsers that don't support it yet.

Nothing happens in browsers that support masonry.

Just define the masonry in css with your preferred css framework/authoring method and run this function one for the grid element.

## install:

```shell
npm install masonry-pf
```

```shell
yarn add masonry-pf
```

```shell
bun add masonry-pf
```

## Usage

### React

Pass `registerMasonry` to the ref of your grid and set the css styles as if your browser supports masonry.

```jsx
import { registerMasonry } from 'masonry-pf';

function Masonry({ children }) {
  return (
    <div
      className="grid grid-rows-[masonry] grid-cols-1 md:grid-cols-3 gap-4"
      ref={registerMasonry}
    >
      {children}
    </div>
  );
}
```

> [!TIP]
> example uses tailwindcss but this also works with all other styling solutions

> [!WARNING]:
> react versions prior to v19 do not clean up refs. Therefore, this is recommended in v19 and above only.

### vanilla: HTML + CSS + JS

You can use this package without any build tooling. Paste this in an html file and you can see it in action.

```html
<head>
  <script type="importmap">
    {
      "imports": {
        "masonry-pf": "https://esm.run/masonry-pf@1.1.1"
      }
    }
  </script>
  <style>
    .masonry {
      display: grid;
      gap: 1rem;
      justify-content: center;
      margin-top: 1rem;
    }

#horizontal {
      grid-template-columns: masonry;
      grid-template-rows: repeat(3, 200px);
      grid-auto-flow: column;
    }

#vertical {
      grid-template-columns: repeat(3, 200px);
      grid-template-rows: masonry;
    }
  </style>
  <script type="module">
    import { registerMasonry } from 'masonry-pf';

registerMasonry(horizontal);
    registerMasonry(vertical);
  </script>
</head>
<body>
  <div class="masonry" id="horizontal">
    <img src="https://picsum.photos/300/200" width="300" />
    <img src="https://picsum.photos/225/200" width="225" />
    <img src="https://picsum.photos/150/200" width="150" />
    <img src="https://picsum.photos/150/200" width="150" />
    <img src="https://picsum.photos/225/200" width="225" />
    <img src="https://picsum.photos/300/200" width="300" />
    <img src="https://picsum.photos/300/200" width="300" />
    <img src="https://picsum.photos/225/200" width="225" />
    <img src="https://picsum.photos/150/200" width="150" />
    <img src="https://picsum.photos/150/200" width="150" />
    <img src="https://picsum.photos/225/200" width="225" />
    <img src="https://picsum.photos/300/200" width="300" />
  </div>
  <div class="masonry" id="vertical">
    <img src="https://picsum.photos/200/300" height="300" />
    <img src="https://picsum.photos/200/225" height="225" />
    <img src="https://picsum.photos/200/150" height="150" />
    <img src="https://picsum.photos/200/150" height="150" />
    <img src="https://picsum.photos/200/225" height="225" />
    <img src="https://picsum.photos/200/300" height="300" />
    <img src="https://picsum.photos/200/300" height="300" />
    <img src="https://picsum.photos/200/225" height="225" />
    <img src="https://picsum.photos/200/150" height="150" />
    <img src="https://picsum.photos/200/150" height="150" />
    <img src="https://picsum.photos/200/225" height="225" />
    <img src="https://picsum.photos/200/300" height="300" />
  </div>
</body>
```

## Package size

If you are extremely worried about package size and speed and only using vertical masonry, you can keep using v1.0.0

v1.1.1 started checking all of your stylesheets to detect masonry direction.

| version | size |
|---------|------| 
| 1.0.0   | 499B |
| 1.1.1   | 751B |

masonry-pf

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README