4

I would like to create a group of cards of varying height, but I have had trouble displaying them so that it does not have extra space below the shorter ones.

I want it to look like this:

enter image description here

What I do not want is to have the cards stretch to fill the space. I want the card below to slide up to fill the space.

Is this possible with pure CSS? If not, how would I do this with Javascript?

Here's something to work with: http://codepen.io/calebeby/pen/LGaVoL

.row {
    @include display(flex);
    @include flex-wrap(wrap);
}
Michael Benjamin
  • 307,417
  • 93
  • 525
  • 644
Caleb Eby
  • 346
  • 2
  • 13
  • One way you can do is to create two columns and put the cards inside each columns. That way with only css, html you can solve the issue. – DebRaj Feb 15 '16 at 06:15

1 Answers1

5

I think you need to adopt 'Masonry - Cascading grid layout library' js for creating these type layouts.

Masonry Cascading Grid Layout
Masonry Cascading Grid Layout - Options

Sayed Rafeeq
  • 1,209
  • 1
  • 14
  • 27