how do i create a grid of cards with angular material?
I just needed this; here's a more comprehensive solution, only using the layout features, for 3 columns:
<md-content class="md-padding" layout="row" layout-wrap>
<div flex="33" ng-repeat="i in [1,2,3,4,5,6,7]">
<md-card>
// ...
</md-card>
</div>
</md-content>
The card must be wrapped inside a correctly-sized div to keep the margins under control and avoid overflow.
I have created something similar to what you may want. The md-card
is wrapped within a div
having layout-wrap
. The divs are dynamically generated after reading.
Here is the code :
<div class='md-padding' layout="row" layout-wrap>
<md-card style="width: 350px;" ng-repeat="user in users">
<img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
<md-card-content>
<h2>{{user}}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button>Save</md-button>
<md-button>View</md-button>
</div>
</md-card>
</div>
The cards width can be adjusted with inline styling, hope it helps.
To be compling to material/angular, you must use flex attr to md-card. Flex attr will give you a proportional width about its parent.
<div class='md-padding' layout="row" layout-wrap>
<md-card flex="40" flex-sm="80" ng-repeat="user in users">
<img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
<md-card-content>
<h2>{{user}}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button>Save</md-button>
<md-button>View</md-button>
</div>
</md-card>
</div>
In this example, you will have two cards (40% each) and when the screen resizes to -sm, the cards will be at 80%.