How to get a linebreak?

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>

Answer

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.