solid-mason

> Simple masonry layout in SolidJS

  

src="https://raw.githubusercontent.com/lxsmnsyc/solid-mason/main/images/solid-mason.png"
alt="Example"
style="width: 80%; height: auto;"
/>

Install

``bash
npm install --save solid-mason
`

`bash
yarn add solid-mason
`

`bash
pnpm add solid-mason
`

Usage

$3

`js
import { Mason } from 'solid-mason';

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

`

$3

`js
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 },
]);

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

``

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

!Sponsors

License

MIT © lxsmnsyc