Port of react-masonry-css for Solid JS
npm install solid-masonry> Manually fork from react-masonry-css.
Create a masonry layout with css-based using Solid to handle resonsive viewport.
```
npm i solid-masonry
Try it on Playground
`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 (
className="my-masonry-grid"
columnClassName="my-masonry-grid_column"
each={[1,2,3,4,5,6,7,8]}
>
{(item) =>
render(() =>
`
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;
}
``