Masonry layout for SolidJS
npm install 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;"
/>
``bash`
npm install --save solid-mason
`bash`
yarn add solid-mason
`bash`
pnpm add solid-mason
`js
import { Mason } from 'solid-mason';
items={someArray}
columns={5}
>
{(item, index) =>
`
`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 },
]);
items={someArray}
columns={breakpoints()}
>
{(item, index) =>
``
- 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.
MIT © lxsmnsyc