Grid behavior
I don't really understand why this happens.
https://codepen.io/myntsu/pen/PoaeVyQ
The grid overflows because of this
grid-template-rows: repeat(4, 25%); but shouldn't 25% summ up 100%? I changed to auto-fill instead and it fixes it.
Tried the all the possible methods before, why does it do that?
Also, how do you guys suggest to make this responsive in mobile?10 Replies
Ya but you are not accounting for the gap
gap != row heights
so you have 1rem gap on each row that increases the overall size
Yeah, I mean I understand that, but I didn't think the gap would influence?
At least with %s.
I tried doing like a --gap variable, then substract it, but of course it wouldn't work with %s ðŸ˜
correct so because it has no influence you have 4 rows of 25% that make up 100%
then add gap xD
Hmm, so the only solution would be a fixed rem size, with a var that substracts it?
I mean, auto-fill works in this case. I guess I was expecting some weird logic behind it 🥹
What would you recommend for this to be responsive?
I've been thinking about it as well.
Making pages that fit full height are a pain in arse.
I tend to avoid that design choice when I can.
but yea just use auto-fill
They're some times.
But they're cool 🥹
I think removing the side images will be more than enough to make it responsive I guess.
The twitter logic 
haha
yea that would do
Anyways, thanks. I think I was looking for a godly unspoken answer, but it's just as simple as I imagined.
Yea don't try to always find the perfect solutions too, cause as you know there is many ways to do it.
like you could make the outside images squishy too
then min/max the content, so the outer images act like a bg/overflow type
I mean, ye, but it fucks around object fit.