solid-mason

Simple masonry layout in SolidJS

Install

npm install --save solid-mason

yarn add solid-mason

pnpm add solid-mason

Usage

Basic example

import { Mason } from 'solid-mason';

<Mason
  as="div"
  items={someArray}
  columns={5}
>
  {(item, index) => <MyImage />}
</Mason>

Breakpoints example

import { Mason, createMasonryBreakpoints } from 'solid-mason';

const breakpoints = createMasonryBreakpoints(() => [
  { query: '(min-width: 1536px)', columns: 6 },
  { query: '(min-width: 1280px) and (max-width: 1536px)', columns: 5 },
  { query: '(min-width: 1024px) and (max-width: 1280px)', columns: 4 },
  { query: '(min-width: 768px) and (max-width: 1024px)', columns: 3 },
  { query: '(max-width: 768px)', columns: 2 },
]);

<Mason
  as="div"
  items={someArray}
  columns={breakpoints()}
>
  {(item, index) => <MyImage />}
</Mason>

Notes

• Masonry's layout order is based on the shortest column at the time a new element is being inserted.
• Each children must have a definite height on initial paint. Elements, like images, that changes height dynamically won't be re-adjused automatically by the mansory container.

Sponsors

License

MIT © lxsmnsyc