Grid / Flex solution
Hi frontenders, how would you solve this? 😁
8 Replies
grid is ideal for this, 2 columns, 3 rows and a gap. 1st and 3rd image row span of 2
something like this https://codepen.io/MarkBoots/pen/MWZzbGj (first try yourself)
Thanks Markboots 😉 its not really the same because the left bottom image has a different size instead the right top😄 But its close 😊😉
well you can change the grid-column rows
Is it also possible to use %? So that i have the correct ratio?
Use fr instead and you can use it as a drop in replacement for % if you want (It just doesn’t have to add up to 100. You can do 66.6fr 33.3fr or just 2fr 1fr)
Ok! Then I need to use grid-auto-rows: auto?
Instead of grid-template-rows: repeat(12, 87px);
where's
repeat(12, 87px) coming from? Unless you actually need 12 cells and they have to be 87px exactly, that's terrible practice
Take Mark's example, this line:
You can adjust those values until the rows match the heights you want to have. That 0.25fr is the height of the overlap, the first 1fr is the height of the top-right image (because it's the image that's only in the first row), the second 1fr determines the height of the bottom left image
Like Z said, 1fr is a relative unit. All the values are added up, then the available space is distributed according to how many fr each row or column is defined as.
1fr 2fr 1fr is the same as 2fr 4fr 2fr, both result in a middle row/column that's twice the size of the other twoFor completeness here's the code https://codepen.io/z-/pen/NWeELdy/e428c64bebab12246ed9542f7019af6e
(if you want to see plain HTML or CSS click the
v down chevron and click "View Compiled")