Removing Horizontal Whitespace Between Divs

[tomlom]

Hey everyone!

I’m trying to arrange 6 cards in two columns. Cards have different heights. When trying to arrange them using a flexbox, there is horizontal whitespace between cards. Cards need to be arrange left-to-right, top-to-bottom.

Any insight would be extremely helpful. Thanks!

[Paulie_D]

We need to see the code in a Codepen demo but if this a masonry layout that is usually reserved for Javascript solutions.

https://stackoverflow.com/questions/44377343/css-only-masonry-layout-but-with-elements-ordered-horizontally

[tomlom]

Hey Paulie,

Thanks for your response. Is there any way possible to do this with just CSS/HTML? That is what the client is looking for.

[Beverleyh]

The link that Paulie provided is pretty comprehensive and covers all the prerequisites for a CSS-only solution (please read the whole thread), else, JavaScript it would have to be.

Also note what he said about needing to see your code. I already said that to you too in your previous question thread – it’s the quickest and most efficient way that any of us can help you, without guessing (which is time consuming and frustrating for all of us).

[Pogany]

Hi,
If CSS only is in your mind you may try using CSS columns, for example like this:

https://codepen.io/giaco/pen/BPmrLd

I hope it helps. Alternatively try putting together a simple codepen with what you have in mind.

[Beverleyh]

The OP stated;

Cards need to be arrange left-to-right, top-to-bottom.

Unfortunately column-count orders items top-to-bottom, then left-to-right.

[Author]

Posts