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 repeat(12, 87px)repeat(12, 87px) 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:

  grid-template-rows: 1fr 0.25fr 1fr;

  grid-template-rows: 1fr 0.25fr 1fr;

You can adjust those values until the rows match the heights you want to have. That 0.25fr0.25fr is the height of the overlap, the first 1fr1fr is the height of the top-right image (because it's the image that's only in the first row), the second 1fr1fr 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.
1fr 2fr 1fr1fr 2fr 1fr is the same as 2fr 4fr 2fr2fr 4fr 2fr, 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")