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
  • 346,931
  • 104
  • 581
  • 701
Caleb Eby
  • 356
  • 3
  • 14
  • 1
    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,219
  • 1
  • 15
  • 28