grid breaking my brain
https://codepen.io/Miss-Fox/pen/WNqzOdm?editors=1010
each .collections-item is the same width.... each .collections-item .img-wrapper__lg is the same width... each .img-wrapper is the same aspect-ratio .... and has an overflow: hidden....
so why does the last one have a gap in between the three small images and the first two , their row of three images overflows onto each other?
12 Replies
and what? sometimes equal columns , sometimes last column is larger? i dont get what is creating these differences when all the img-wrappers are supposed to keep everything tidy and consistent.
the longer title is causing that gap but how to fix it idk 😄
guessing using auto is not the best option since images have different sizes
I want the gap in between the small images. I had set sizes and changed them to auto to see if that was the issue. If I give each .img-wrapper a width:100% I get the behaviour I want but I couldn't figure out why the cols weren't equal but I think you're right it's the title setting the width of the first column. But why no gap in between all the small [things] inages , there just isn't enough space I guess ?
If it is any consolation you don't have this issue on Firefox.
You also don't have the issue if you use the simpler grid-areas syntax but presumably there is a reason why you are using the line start/end method.
that is true but in first two the last image is bigger xD
yeah those grid line names are confusing
I still can't wrap my head round grid lines usage 😆
grid-template-areas: "lg lg lg" "smOne smTwo smThree" "title title count" ; achieves the same thing (in this case) and is, at least in my opinion, far easier to understand.
good point, I hadn't noticed that detail.
Just going back to the original code, shouldn't you use 1fr rather than auto ?
grid-template-columns: [lg-start title-start smOne-start] 1fr [smOne-end smTwo-start] 1fr [smTwo-end title-end smThree-start count-start] 1fr [smThree-end lg-end count-end]I originally started with a minmax with 1fr amd changed it to auto while debugging. I was thinking each col should be the same since I was setting the img wrappers aspect ratio and they should take up 100% by default but didn't take into account how the length of the words would throw it off. I've found a few ways to solve it but in the original post could not fathom WHY it was happening.
So it's the length of the .title that's making the different sized columns? I thought spanning it Iver two cols would nix any differences between the length of "Nature" and "Architecture" since there should be plenty of room for both.
Easiest fix for me was to change 1 line of css and the issue resolved immediately
on the
.collections-item selector, change gap: 1em; to row-gap: 1em; Your grid did not need any gapping set up in the x axis.
Now, as for why 2 of your sections looked right, and 2 did not with the same settings, I don't knowIt does though, to put gap in between each small image /bw each column
Ahh I misunderstood. I thought you were saying the 2 wihtout gaps was the desired effect and the third was wrong.
I kind of stopped reading thinking I understood your question right at "so why does the last one have a gap in between the three small images and the first two "
Okay, what about this one with also just 1 css change?
As far as I can tell, the reason you were getting inconsistent behavior before was related to the source images in the 3rd card all having the same aspect ratio.
I can't tell you why
width: 100%; is working but I can assert that it's working
Yeah I found that as well , commented out that inline-size: 100% at the bottom so I could keep investigating the why. I think it must be that the sizing of my columns aren't even like I suspected which is throwing off the .img-wrapper aspect ratio of 2/1. The whole reason I wrapped the images was to better control the sizing 🤦🏻♀️and my minmax was giving me weird results too so threw it to auto which seemed even more bizarre . Idk if I'll ever "get" grid through way I want to