Aligning cards in ng-repeat
<p>I am showing cards using <code>ng-repeat</code>. The data and all is coming fine but somehow i am struggling to have 3 cards in a row and go to the next row for the other items.</p>

<p>My <code>ng-repeat</code> code is as follows:</p>

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

                &lt;/md-card-title&gt;

                &lt;md-card-content&gt;
                    &lt;p&gt;
                        {{agent.address}}
                    &lt;/p&gt;
                &lt;/md-card-content&gt;

                &lt;md-card-actions layout="row" layout-align="end center"&gt;
                    &lt;md-button&gt;Collect {{agent.balance_amount}}&lt;/md-button&gt;
                &lt;/md-card-actions&gt;

            &lt;/md-card&gt;
        &lt;/md-content&gt;
</code></pre>

<p>I want the card side by side but these are coming one per each line.</p>

<p>Where is the issue and how to resolve it please. </p>