- columns : p % columns – orderString += ` – :nth-child(${p}) { – order: ${order}; – } – ` – } – return orderString – } – – /** – * Generate media queries for configuration breakpoints – * This entails setting the width of Panels at different viewport width…
- masonry-panel { – width: ${100 / columns}%; – ${css` – columns)}; – `} – } – } – ` – } – return mediaString – } – – /** – * The container for our Masonry layout – * If there is configuration and we have children, then generate media…
- : ‘animation: fadeOut 1s’} – transition: visibility 1s linear; – } – ` – – /** – * Simple panel elements – * Don’t have anything special happening – * The masonry-panel class is exposed so can be styled with CSS – */ – const MasonryPanel = styled.div` – overflow:…
- debounce(this.layout, 0)) – } – /** – * Wipe the component state and reset it default, Don’t think this is necessary as setState overrides anyway – */ – // reset = () = { – // // this.setState({ – // // heights: [], – // // loading: false, – //…
- heights[order – 1]) heights[order – 1] = 0 – heights[order – 1] = heights[order – 1] + parseInt(height, 10) – } – this.setState({ heights }) – } – /** – * Set the layout height based on referencing the content cumulative height – * This probably doesn’t need its own…
I put together a “true” masonry layout [pen](https://codepen.io/jh3y/pen/vgZWZL) a while back. I’ve been asked a couple of times how I’d go about port…
Continue reading “Responsive masonry layout with React & flexbox 😎”