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.
18 Replies
phyrasaur
phyrasaur•17mo ago
grid = document.querySelector("#container/*, .product*/"); returns the first element that matches but you have 2 different grid containers
DJR
DJR•17mo ago
I've tried a number of combinations which is why I left the other parts in and just commented them out. Nothing seems to work.
phyrasaur
phyrasaur•17mo ago
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 blobthink mean what line does what
DJR
DJR•17mo ago
I 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.
phyrasaur
phyrasaur•17mo ago
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 child
DJR
DJR•17mo ago
Oh wow, I've just come back to all of this. Thank you so much for this.
phyrasaur
phyrasaur•17mo ago
you can turn them into single function btw, I just copy paste Andy's code and modify it from there
DJR
DJR•17mo ago
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?
phyrasaur
phyrasaur•17mo ago
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 load
DJR
DJR•17mo ago
I had it set on .product but commented it out because I couldn't get it to stop overlapping the first two elements.
phyrasaur
phyrasaur•17mo ago
I don't want to debug that so I just go straight to Andy's original code blobsweat
DJR
DJR•17mo ago
😂 Understandable lmao Thank you my friend. How do I buy you a coffee or something
phyrasaur
phyrasaur•17mo ago
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.
phyrasaur
phyrasaur•17mo ago
not mandatory or anything okay since you asked ahah
DJR
DJR•17mo ago
How much is a coffee in the States I have no idea 🤣 £6.00 for $6.05 Lmao Consider it done
phyrasaur
phyrasaur•17mo ago
omggg thank youuu blobheart
DJR
DJR•17mo ago
🤟
Want results from more Discord servers?
Add your server