Is there a way to build this layout with FlexBox?
Here is the codepen that I tried to make it with Grid, and it kinda works, but i feel like it becomes way too complicated with css grid.
https://codepen.io/harunjonuzi/pen/vYbOWLa
7 Replies
you only need a couple of lines to work with grid https://codepen.io/jochemm/pen/rNPYQOP
What jochem did is the kay, you need the final row to have a
1fr on it, so that the others are able to be small, and then that just takes up the rest of the space.
Before I realized he answered, I did the same thing, but a different way https://codepen.io/kevinpowell/pen/XWOzoygWe need a 1/-1 option in the future for auto cols/rows
btw, if you span the image from 1 to 5 ( 1 row more than needed), you can have align-items: start instead of setting grid-auto-rows: auto auto 1fr.
So the auto keeps for example the normal height of the h1 with all the original paddings or margins that it has, but if we specify 1fr, then it goes to divide it based on fraction units...do i understand it right?
yup pretty much
I always think of auto as max-content... not sure if that is accurate for grid templates though Mark or Kevin would have to correct me on this.
so the reason we add 1fr at the end is to kinda use that max-content for other elements, and then kinda use the last 1fr as a foundation to push them up, and if we change that to auto as well, then 3 rows or 4, start behaving like fr...I think I am understanding it right...🤣
I'm not a 'read-spec'-guy, but as far as my experience with it goes
auto will devide remaining space evenly-ish (simular to flex-grow?), fr will take the most space as possible