Grid / Flex solution

Hi frontenders, how would you solve this?

MarkBoots•10/5/23, 8:00 PM

grid is ideal for this, 2 columns, 3 rows and a gap. 1st and 3rd image row span of 2
something like this (first try yourself)

impactftwOP•10/6/23, 5:26 AM

Thanks Markboots

its not really the same because the left bottom image has a different size instead the right top

But its close

MarkBoots•10/6/23, 6:09 AM

well you can change the grid-column rows

impactftwOP•10/6/23, 9:22 AM

Is it also possible to use %? So that i have the correct ratio?

Zoë•10/6/23, 9:29 AM

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)

ZZoë Use fr instead and you can use it as a drop in replacement for % if you want (It...

impactftwOP•10/6/23, 9:52 AM

Ok! Then I need to use grid-auto-rows: auto?

Instead of grid-template-rows: repeat(12, 87px);

Jochem•10/6/23, 10:06 AM

where's coming from? Unless you actually need 12 cells and they have to be 87px exactly, that's terrible practice

Jochem•10/6/23, 10:09 AM

Take Mark's example, this line:

You can adjust those values until the rows match the heights you want to have. That is the height of the overlap, the first is the height of the top-right image (because it's the image that's only in the first row), the second determines the height of the bottom left image

Jochem•10/6/23, 10:11 AM

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.
is the same as , both result in a middle row/column that's twice the size of the other two

Zoë•10/6/23, 2:04 PM

For completeness here's the code https://codepen.io/z-/pen/NWeELdy/e428c64bebab12246ed9542f7019af6e
(if you want to see plain HTML or CSS click the down chevron and click "View Compiled")