0

I wanted to align cards of different heights into 2 columns that wrap into one row from left to right. I have tried things: display as grid and setting grid-template-row to some value and then assigning row spans. But that does not give me full control over the height of cards. I have around 6 divs returned as an array so cannot clearly think how flex box would give me two columns as flex is one dimensional.

My HTML is in the form of:

<div className="parent">
    <div className="child-1"></div>
    <div className="child-2"></div>
    <div className="child-3"></div>
    <div className="child-4"></div>
    <div className="child-5"></div>
    <div className="child-6"></div>
</div>

The layout

Delfin
  • 607
  • 7
  • 18
  • you show 6 in picture but only 5 in the supplied HTML – Mark Schultheiss Apr 29 '21 at 22:18
  • don't stop at the title of duplicate. what you want to achieve is called *masonry layout* and this doesn't mean you have to use a *masory library*. In the duplicate there is CSS only solutions with no external library – Temani Afif Apr 29 '21 at 22:34

1 Answers1

0

If you're width is static then you can just set the widths of all of the elements to be the same 'with a class' and then with flex wrapping they will all line up in columns. From there you can assign whatever heights you want to each.

Owen Moogk
  • 37
  • 8