Выравнивание карт в повторе

Я показываю карты, используя ng-repeat. Данные и все идет хорошо, но как-то я изо всех сил стараюсь иметь 3 карты подряд и перейти к следующей строке для других предметов.

Код ng-repeat выглядит следующим образом:

<md-content ng-repeat="agent in agents|filter:search" layout="row">
            <md-card>
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-subhead">{{agent.RCustId}}</span>
                        <span class="md-headline">{{agent.FullName}}</span>
                        <span class="md-subhead">{{agent.ContactNum}}</span>
                    </md-card-title-text>

                </md-card-title>

                <md-card-content>
                    <p>
                        {{agent.address}}
                    </p>
                </md-card-content>

                <md-card-actions layout="row" layout-align="end center">
                    <md-button>Collect {{agent.balance_amount}}</md-button>
                </md-card-actions>

            </md-card>
        </md-content>

Я хочу, чтобы карта была бок о бок, но они идут по одному на каждую строку.

Где проблема и как ее решить, пожалуйста.