Adapting Andy Barefoot's CSS Grid Masonry Layout to Accommodate One Inside the Other
I've been using Andy Barefoot's CSS grid masonry layout that was posted on Medium, and I've gotten this far, but I just can't seem to get it to work for what I want. I'm aware of Masonry.js but I'm wanting to see if it can be done without it first of all. There are no images in this design.
Essentially what I want to create is a masonry layout, with another masonry layout inside. I captured a screenshot of what I'm currently working with, and adapted it in Photoshop to what I'm trying to make.
I've been perplexed by this for the better part of a day, and I really don't know what else to try, or if I'm missing something obvious, so any help would be appreciated very much!
Andy's Medium post:
https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
JSFiddle:
https://jsfiddle.net/n216evhj/1/
Diagrams:
https://imgur.com/a/YmyGR9W
Medium
Masonry style layout with CSS Grid
I’ve been working on a way of using CSS Grid and a small amount of JavaScript to make Masonry style layouts. I reproduce all the…
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Imgur
Untitled Album
18 Replies
grid = document.querySelector("#container/*, .product*/"); returns the first element that matches but you have 2 different grid containersI've tried a number of combinations which is why I left the other parts in and just commented them out. Nothing seems to work.
The code andy wrote works for a single-type grid container, there are a few ways to approach this, first call the function 2 times, another one is to change the functions so that they can iterate over a number of grid containers
idk if you understand what's happening 
mean what line does what
mean what line does whatI did try two functions with Andy's original code but what was happening is that text was overlapping over the first two elements. I haven't tried it with this code though. 🤔
I could try iterating. I didn't think about that.
I think having
grid-auto-rows set on both grid containers is causing some problems.@dylricho my take https://codepen.io/petpeeve/pen/XWygJJO
you can simplify it further by making the function to expect an array/like as an argument so that you can do a simple querySelectorAll
oh wait I didn't check for resize, it's buggy
@dylricho okay done flex-taping ahah
andy said you need to wrap the content of each grid item in an extra container so that his
getBoundingClientRect will work on overflowing items
but you don't wrap them in a separate wrapper so I work around that by using scrollHeight but then scrollHeight has its own quirk for overflowing item, so I add a conditional to check for recalculation on resize vs initial calculation because on resize, there's no overflow
if you want to use offsetHeight or like Andy's getBoundingClientRect, each grid item should have a single childOh wow, I've just come back to all of this.
Thank you so much for this.
you can turn them into single function btw, I just copy paste Andy's code and modify it from there
Do you know where I went wrong?
So I would need to surround each
<div> and <ul> pair with another container element for that to work?your code only set masonry for the outer container because the inner container doesn't have their own
grid-auto-rows
if you want to stick with getBoundingClientRect, my code works without a wrapper but I have to differentiate between resize and initial loadI had it set on
.product but commented it out because I couldn't get it to stop overlapping the first two elements.I don't want to debug that so I just go straight to Andy's original code 
😂
Understandable lmao
Thank you my friend. How do I buy you a coffee or something
PayPal.Me
Pay Phyrasaur using PayPal.Me
Go to paypal.me/phyrasaur and type in the amount. Since it’s PayPal, it's easy and secure. Don’t have a PayPal account? No worries.
not mandatory or anything okay since you asked ahah
How much is a coffee in the States
I have no idea 🤣
£6.00 for $6.05
Lmao
Consider it done
omggg thank youuu 
🤟