flex: 1; grid equivalent
Hey, in this example i'd like
main to take up all remaining space. I'm aware that it being in a 1fr row is only one fraction of the 100vh container, hence why it doesn't take up all the space. Is there a flex: 1; equivalent in grid to make this sort of thing happen?
Thanks in advance.
https://codepen.io/deerCabin/pen/wvVwmeM8 Replies
It was
The problem is that you have to add
flex-grow: 1 to .gridit does take up the remaining height, but .grid is only as tall as it needs to be
you need to set a height on the .grid
The full screen flex wrapper is redundant
just remove it and use grid 🧠(and like Jochem said then you can just min-height the .grid)
watch out for vh/vw though ... cursed units either use 100% or the new viewport units
i didn't actually have the
full-screen class one my project i just realized, i added it to the example for some reason from habit for vh things haha. yeah adding min-height to the grid did the trick.
however i've just noticed, if you don't define a height on the parent container and 1fr translates to the largest piece of content, why does it take up remaining space on a parent with a defined height (in this case 100vh) instead of giving an even fraction like columns would?not sure what you are asking 🤔
no worries. i'll try to explain again.
from my experience. If a parent container with
grid on it doesn't have a height to it, the size of a 1fr row will be equal to the tallest piece of content in the grid. Since adding 100vh to .grid in my example, it did what i needed, which made main take up the remaining height of the container. but since .grid has a now has a height now, why does the size of 1fr behave that way (take up remaining height) rather than taking up an equal portion of the container's height like 1fr in template-columns would?because you have auto 1fr auto
and grid children will always fill by default
so 1fr is basically saying take up the remaining space because no other fraction is used.
you could set say 0.5fr and it would take up half the remaining space but your auto will then also expand
but any 1+ number would just effectively work the same until you gave it another fraction
imo how grid fills remaining space is what makes it so much nicer for layout than flex. 😄
you can also make things dense too though
ah that makes sense.
yeah i find myself using grid for quite a lot haha
thank you everyone