0

I'm struggling achieving the layout that you can see in this photo.

Long story short, I'm trying to create a dynamic layout where I will have elements with different heights and dynamic number of columns / rows based on number of elements.

Rules:

  • If I have 6 elements -> 3 columns 2 rows.
  • If I have 2 elements -> 2 columns 1 row
  • If I have 1 element -> 1 column 1 row

I was thinking that I might use display: grid, but then I realized that they won't keep their margins equals if the elements have different heights.

Anybody had same problem?

More examples here.

Alin Apinzarasoaie
  • 1
  • 1
  • 1
    Please provide a [repro] for debugging details. Why work with margins at all? CSS-Grid uses the `gap` property to space elements apart equally. – tacoshy Oct 07 '22 at 06:25
  • hey @tacoshy I have edited the description and added more examples. The margin part is not so important, I just wanted to let you know that the elements needs to have the same distance between each other. – Alin Apinzarasoaie Oct 07 '22 at 06:36

0 Answers0