Pinterest Layout With Angular Material

Issue

I need the following layout for Angular Material were the cards are inserted from left to right, wrap at the end of the available width and fill out any vertical space between cards. All cards have the same width, but different height:

Is this possible with plain angular and CSS? How?

---

I tried to accomplish this with display:flex but I couldn't get rid of the vertical space:

.cards {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
}

---

I also found a pure CSS solution, which works out the space problem, but has different order and also requires a fixed height: https://codepen.io/michellebarker/pen/zvxpoG

---

Update

Additional requirements:

• Responsive layout: Depending on window with, there are fewer or more columns; but they always fill out all available space (adaptive column width, e.g. 100%, 50%, etc)
• The insertion of the cards must work with ng-repeat="card in cards | orderBy:order:reverse"

Solution

I just found this link, its giving you simple css and html for the display you are looking for (it's even responsive).

Answered By - Hila Grossbard