solid-masonry

> Manually fork from react-masonry-css.

Create a masonry layout with css-based using Solid to handle resonsive viewport.

Installation

``
npm i solid-masonry
`

Usage

Try it on Playground

Codesandbox - Demo | Editor

`tsx
import './masonry.css'
import { render } from 'solid-js/web'
import Masonry from 'solid-masonry'

const App = () => {
const randomHeight = () => {
const heightList = [150, 200, 250]
return heightList[Math.floor(Math.random() * heightList.length)]
}

const breakpointColumnsObj = {
default: 4,
1100: 3,
700: 2,
500: 1
}

return (
breakpointCols={breakpointColumnsObj}
className="my-masonry-grid"
columnClassName="my-masonry-grid_column"
each={[1,2,3,4,5,6,7,8]}
>
{(item) =>

render(() => , document.getElementById("root"));
`

And here for masonry.css, you need to create this manually:

`css
.my-masonry-grid {
display: -webkit-box; / Not needed if autoprefixing /
display: -ms-flexbox; / Not needed if autoprefixing /
display: flex;
margin-left: -10px; / gutter size offset /
width: auto;
}
.my-masonry-grid_column {
padding-left: 10px; / gutter size /
background-clip: padding-box;
}

/ Style your items /
.my-masonry-grid_column > div { / change div to reference your elements you put in /
background: grey;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
}
``