There's a big problem with cards : if they're from different heights, it's really hard to float.
I've implemented something like that in a yet to release project recently, without even thinking of the concept of card. Being a responsive app, it looked to me like an obvious choice.
I've put some lorem ipsum content in those cards, and it looked just beautiful. ... then I placed real content. Shit happened.
Simply using float won't do it when cards have different height, it looks too ugly and have a lot of random almost entirely blank lines.
The look and feel of pinterest was good enough for the type of content I wanted to display, so I had a look to how they did it : every card is absolutely positioned to form a compact canvas, which means they have to compute every card position based on which will be shown.
I'm not saying it's impossible to achieve, but it seems to me it's not that responsive friendly, because it's not css friendly : the straighter solution to make it responsive is to have cards using the whole width of the block they're all in, or to have them all the exact same height.
EDIT : to illustrate this : http://jsfiddle.net/uV645/3/
Resize browser by width to see effect.
I've implemented something like that in a yet to release project recently, without even thinking of the concept of card. Being a responsive app, it looked to me like an obvious choice.
I've put some lorem ipsum content in those cards, and it looked just beautiful. ... then I placed real content. Shit happened.
Simply using float won't do it when cards have different height, it looks too ugly and have a lot of random almost entirely blank lines.
The look and feel of pinterest was good enough for the type of content I wanted to display, so I had a look to how they did it : every card is absolutely positioned to form a compact canvas, which means they have to compute every card position based on which will be shown.
I'm not saying it's impossible to achieve, but it seems to me it's not that responsive friendly, because it's not css friendly : the straighter solution to make it responsive is to have cards using the whole width of the block they're all in, or to have them all the exact same height.
EDIT : to illustrate this : http://jsfiddle.net/uV645/3/ Resize browser by width to see effect.