0

I am currently exploring Angular Material. But I wondered how I could place several cards next to each other. I do this with an ng-repeat. But what I want is that a maximal amount of three can be next to each other so that the 4th card starts in a new row dynamically.

Any ideas how to build this without custom css?

<md-content layout-xs="column" layout="row">
    <div flex-xs flex-gt-xs="120" layout="column" ng-repeat="item in items">
        <md-card> .... </md-card>
    </div>
</md-content>
peterh
  • 11,875
  • 18
  • 85
  • 108
juleee
  • 456
  • 1
  • 7
  • 20
  • did you checked this question http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap – PSK Mar 27 '16 at 05:16
  • No but this is not the solution i imagine. As the solution is based inside the JavaScript it won't be responsive or anything. In general I think it is a bad idea to address Layout issues in JavaScript. – juleee Mar 27 '16 at 05:22

1 Answers1

2

You can do it using flex:

<md-content layout-xs="column" layout="row" flex>
    <md-card ng-repeat="item in items" flex="33"> .... </md-card>
</md-content>

And adding the following css property:

md-content{
  flex-wrap: wrap;
}


EDIT:

As pointed out by @juleee, it could also be achieved by adding the layout-wrap directive: 

<md-content layout-xs="column" layout="row" flex layout-wrap>

Which would automatically add the above css to md-content.

Daniel
  • 6,194
  • 7
  • 33
  • 59
  • Perfect! Thanks a lot. And if I add "layout-wrap" to my md-content element I don't need any CSS . – juleee Mar 27 '16 at 05:27