How do I make cards of different heights fill gap in css? [duplicate]


Tags: css,material-design,flexbox

Problem :

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);
}


Solution :

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


    CSS Howto..

    How to change opacity in disabled state of image in css

    How to format CSS of a dropdown menu so if the 'parent' dropdown is current then the children will not take the formatting of the parent

    How slow are CSS media-queries?

    How to combine bold and italic in CSS?

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    How to give different views for same url for different devices with same resolution?

    links are showing up on each line, instead of inline

    How can I display a list in an x by y fashion?

    Jquery-How to grey out the background while showing the loading icon over it

    What is the best way to store css data inside database and call it similar to how a css file would be

    How can I cut too wide image in HTML?

    How to apply a CSS style to div AND the div nested in the div [duplicate]

    How can I remove this white space from a table?

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    How can I use a CSS3 transform on an element without stretching the text inside it?

    How can I write more efficient CSS for the max-width

    How to position css sprite play button within video image

    Css how to set 3 block block/div's in one line [closed]

    How to force resize inside iframe?

    Does anyone know how Pinterest.com's layout works?

    How to delay one transition but not the other?

    How to move object into the screen from outside via jQuery transition

    How can I add text to a jQuery slider control?

    How to scroll to bottom of div generated by ng-repeat Angular JS using JQuery?

    How to have multiple CSS transitions on an element?

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How to change H3 color in bootstrap using CSS file

    How to give cross browser transparency to element's background only?

    How can I change opacity of an image in css without disturbing the overwritten text's opacity

    How to write a structured HTML/CSS?