Trying to have a grid of card with angular material

Question

I have been trying to have a grid of card using angular-material. So I am using the directives md-grid-list and md-card. but the result is pretty ugly, and I am not sure to understand how the md-row-heigh (ratio) works, I have the documentation, but it doesn't say a lot.

Here is what I have been doing so far : http://codepen.io/stunaz/pen/qdQwbq , I am trying to have a responsive grid of card, not even sure if the md-grid-list is appropriate here.

  <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height="300px" md-gutter="12px" md-gutter-gt-sm="8px">

<md-grid-tile class="gray" ng-repeat="user in users">
  <md-card>
    <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>
</md-grid-tile>

I am open to any kind of help.

Annual

Answer 1

You could use Flex Box instead of md-grid-list to have the same effect.

  <div class='md-padding' layout="row" flex>
     <div layout="row" flex>
        <div class="parent" layout="column" ng-repeat="user in users" flex>
            ... Your content here
        </div>
     </div>
  </div>

Take a look at this Example with fixed number of cards in a row:

http://codepen.io/anon/pen/bdQJxy

And a responsive example, using Wrap layout

http://codepen.io/anon/pen/MwzRde

Hope this is what you wanted.

Quicklime

The problem with that is that it is not responsive, cards should go under each others when the screen size is small. – Annual

Yes, this one have a fixed number of tiles per row. Working on a responsive example. – Quicklime

You can have diferent sizes or layout for each diferent screen sizes by setting flex-sm options. (It's all in the linked page on the answer). – Quicklime

@ItaloAyres I have a question and it is if the cards have different heights, in this example is for example the text it is inside of the card have different sizes, how can i fit them on the empty spaces (like align them all to the top)?? If you dindt understand please tell me, I really need help Like this example material.angularjs.org/latest/demo/card – Square

@TiagoSousa May I write in portuguese haha? Se você observar nesse exemplo que você mandou, a organização é feita colocando rows com um único card, dentro de columns. Que é o contrario do exemplo que eu fiz, onde tem columns dentro de rows. Isso dá o efeito que você procura. – Quicklime

@ItaloAyres ahahah i think here is better to talk in english because could be useful for other people. I reached to this point codepen.io/TiagoSousa/pen/EKpvJJ in this question #36791792 but when i went to smaller windows it gonna be in wrong order, understand?? – Square

@TiagoSousa I believe there's no way to do it easily using only layout formatting. Probably you will have to do some DOM manipulation or controller logic. I suggest using one of the modules available like Angular DeckGrid or AngularGrid – Quicklime

@ItaloAyres The only problem that is built for handle images, and i want to put inside divs (other stuff) :( – Square

@TiagoSousa I believe it can be used with any kind of element. – Quicklime

Answer 2

Use this HTML markup and change flex number in md-card to fulfill your requirement.

<div class='md-padding' layout="row" layout-wrap>
                    <md-card flex="15" ng-repeat ="n in [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]">
                        <img ng-src="http://i2.wp.com/celebsbios.com/wp-content/uploads/2015/12/Halsey-Singer-3.jpg?resize=150%2C150" class="md-card-image" alt="Washed Out">
                        <md-card-title>
                            <md-card-title-text>
                                <span class="md-headline">Action buttons</span>
                            </md-card-title-text>
                        </md-card-title>
                        <md-card-content>
                            <p>
                                The titles of Washed Out's breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
                            </p>
                            <p>
                                The titles of Washed Out's breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
                            </p>
                            <p>
                                The titles of Washed Out's breakthrough song and the first single from Paracosm share the
                                two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
                            </p>
                        </md-card-content>
                        <md-card-actions layout="row" layout-align="end center">
                            <md-button>Action 1</md-button>
                            <md-button>Action 2</md-button>
                        </md-card-actions>
                    </md-card>
                </div>

Dhole