0

I need a 3 columns grid with maximum of 12 tiles, so maximum 4 rows.

Problem #1: the tiles do not have fixed heights, height is determined by the content filling them. Problem #2: the tiles must not take the height of it's neighbours. Problem #3: when the second row starts, tiles must slide right under the above tile, not under above row.

I don't know grid but after spending couple hours searching I'm starting to think it can't be done..

Is there any way?

Visual presentation of the needed grid

Adi Maniur
  • 1
  • It’s not *yet* widely available using CSS grid (but is implemented in Firefox, behind a flag) but it is detailed in Grid Level 3, (MDN documentation): https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout). At this point I’d suggest using JavaScript, or simply accepting a “normal” grid-layout’s even rows and columns. – David Thomas Mar 01 '22 at 16:29
  • 2
    Check this out: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/ – Ayo Reis Mar 01 '22 at 16:34
  • https://tobiasahlin.com/blog/masonry-with-css/ – Adi Maniur Mar 01 '22 at 19:53

0 Answers0