Search code examples
htmlcssangularjslayoutmaterial-design

Pinterest Layout With Angular Material

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:

enter image description here

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

enter image description here

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

enter image description here

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).

    screen shot from the page