Pinterest Layout With Angular Material

Question

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"

Answer 1

I can't help you with Angular solution at the moment, however if you are able to translate React solution into Angular one following algorithm and code might be helpful.

So in order to generate that layout partition the items into n columns and let the default layout stack them verticaly. Then lay out those columns using flexbox or percentage width.

In order to make the grid responsive subscribe to window resize events and calculate desired column count. columnCount = itemWidth => availableWidth => Math.floor(availableWidth / itemWidth)

Take a look at working React solution. Responsive solution is available here.

Answer 2

I create a plunkr so show you the proof of concept for how this can be accomplished.

http://plnkr.co/j5yZQHK3D7l3nPJ8cPlB

You can utilize layout-wrap and flex in order to accomplish the type of layout you want with essentially no css needed.

<div layout="column" layout-wrap>
  <md-card ng-repeat="card in vm.cards | orderBy:'order':!reverse" flex>
    ...
  </md-card>
</div>

What this does is adjust your rows so that the content only takes up the space it needs, but every column remains the same size. It's the best of both worlds! Additionally, you can order them in any way needed (also demonstrated in plunkr)

Answer 3

I needed the exact same component. But I couldn't find a pure css solution, and flexbox orders the cards from top to botton.

There are some AngularJS based options. But since I am using Angular, I couldn't use them.

Because of this, I developed a component which positions elements from left to right. Elements have same width and different height. The component positions each element by calculating x and y coordinates:

https://github.com/kodfarki/ng-pinterest-layout

You may want to try it, even though the component is under development.