Flex Grid - ala titles - with md-card

Question

I trying to create a responsive list of cards that would have a minimum width, fill all available space (1, 2, 3 pieces in line according to browser size).

So far I have code what does that:

<div class='md-padding' layout="row" layout-wrap>
  <md-card style="min-width: 460px;" ng-repeat="teacher in tc.teachers" flex>
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline" style="padding-bottom: 10px;">{{ teacher.name }}</span>
        ... other elements ....
      </md-card-title-text>
      <md-card-title-media>
        <div class="md-media-lg card-media" style="height: 228px;">
          <img ng-if="teacher.image" ng-src="{{ tc.getImage( teacher ) }}" class="md-card-image" >
        </div>
      </md-card-title-media>
    </md-card-title>
  </md-card>
</div>

What does trick is in line #2 style="min-width: 460px;" and flex

However, problem what I facing is that last element is also 'flexed' to the whole width what looks ugly when for example there are 3 cards in a row and the last row has only 1 element...

How I can adjust this last element to be 1/3 in this case and also be responsive to further size changes?

I am using Angular 1.6.1 with angular-material.

Answer 1

To achieve this, you can use Angular Material md-grid-list and md-grid-tile (you can check the doc here and here), you can specify how many columns you want for each screen size (xs, sm, md, lg, etc.) the height of columns and a few other things.

And if there is a last row with, by example, only one element, this element will not be larger than the others.

You can use it like this :

<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="3" md-cols-lg="4" md-row-height="100px">
    <md-grid-tile ng-repeat="teacher in tc.teachers">
        <!-- width : 100% -> to make the cards gets the full width -->
        <md-card style="width:100%;">
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">{{ teacher.name }}</span>
                    ... other elements ....
                </md-card-title-text>
            </md-card-title>
        </md-card>
    </md-grid-tile>
</md-grid-list>

Here is a working example.