Where does extra height for row come from when using grid?
Hello! I'm unable to figure out why a row grows in height using grid in the responsive layout shown in the picture (extra height highlighted in blue). The mobile-first definition of the grid is as follows:
The media query for desktop just expands the grid's columns a bit and moves elements around, no size or spacing changes whatsoever:
As shown on the bottom right of the picture, the height for the selected element ("Ages 14+", as well as that of the other 2 siblings also rendered in the same row both on mobile and desktop) grows from 68 to 85px. Could anyone clarify what may be leading to such behavior? Thank you in advance!
10 Replies
I think what's happening is that the first three columns are balancing the extra height coming from having the last column to the side between them
the entire grid has to be as tall as the tallest part, which is the GAME MODES section, and because the three cells in the top row and the GAME MECHANICS section together aren't taller than the GAME MODES section, that extra space needs to go somewhere
do you still see the issue if you make the GAME MODES column have less text in it?
You're right! It doesn't happen when GAME MODES is shorter.
I suspected something along those lines might have been happening but didn't know
grid behaved that way. I thought flex was the only one adjusting sizes as it saw fit.
Do you think it could be easily "fixed"? Would I be better off turning to flex? I guess left column (in desktop layout) with flex-direction: column and justify-content: flex-start may be the way to go.I'd have to have a play around with it, I'm not super familiar with grid layouts myself... seems like you should be able to do something like flex's shrink to make the top row non-greedy, but I'm not sure how
Ok. I'll be trying myself. Thank you very much for your prompt response!
grid-template-rows: auto min-content might do the trick
auto for the first one with the title, min-content for the one that's having the issue.
There might be another approach, but without seeing how the grid has been defined it's hard to say for sureThanks for chipping in, Kevin!
To begin with, I have to admit I didn't know you could define both columns and rows. Now, I've been able to achieve the desired result by specifying
grid-template-rows; however, I don't understand the rationale behind it based on the values I'm using. In order to get rid of that unwanted extra space:
- I threw in whatever auto, min-content or max-content values for the first 2 rows.
- I had to set a fr value for the 3rd row (the one with GAME MECHANICS).
E.g.
grid-template-rows: auto auto 1fr
grid-template-rows: min-content min-content 1fr
grid-template-rows: max-content auto 2fr
As soon as I change a fr value for something else on that 3rd row or get rid of it, the unwanted extra space gets back.i think just setting
align-content or align-items (i can never remember which is which) to start will do what you want. But honestly a codepen would greatly help hereI guess It'd be
align-items; however, that one determines how content within the cell is aligned based on the available space, not how the available space should be managed to begin with.
https://css-tricks.com/snippets/css/complete-guide-grid/#aa-align-itemsyeah I don't think align-items would work here, since it doesn't influence the rows/columns/cells themselves, but the placement within those cells.
The reason those 3 all worked is once you use
1fr for the last one, it's basically telling it to use any extra space that was available, whereas before that it uses some sort of algorithm to distribute it between rows, so it's very common when you have an element spanning multiple rows that each one is a bit bigger than it needs to be. By making the 3rd one 1fr, it's just saying it gets all the extra space.
(if you had two of them with 1fr, they'd equally distribute that extra space between them)Before now I was just using grid with
fr for all rows/columns and thinking about relative space distribution among all those rows/columns.
I hadn't thought through what the behavior would be if you specified fr for, let's say, 2 out of 3 rows/columns or, even more interestingly, how a single fr would be treated considering there's no other fr to relate to.
So, summing up, single fr → get me all that extra space. Thank you very much for the clarifications!