card - angularjs material

Tratando de tener una cuadrícula de tarjeta con material angular.

Question

He estado tratando de tener una cuadrícula de tarjeta utilizando material angular. Así que estoy usando las directivas md-grid-list y md-card. pero el resultado es bastante feo, y no estoy seguro de entender cómo funciona la (proporción) md-row-heigh, tengo la documentación, pero no dice mucho.

Esto es lo que he estado haciendo hasta ahora: http://codepen.io/stunaz/pen/qdQwbq , estoy tratando de tener una cuadrícula de tarjeta receptiva, ni siquiera estoy seguro de si la md-grid-list es apropiada aquí.

  <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>

Estoy abierto a cualquier tipo de ayuda.

Answer 1

Podría usar Flex Box en lugar de md-grid-list para tener el mismo efecto.

  <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>

Eche un vistazo a este ejemplo con un número fijo de tarjetas en una fila:

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

Y un ejemplo de respuesta, utilizando el diseño Wrap.

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

Espero que esto sea lo que querías.

Answer 2

Utilice este formato HTML y cambie el número de flexión en md-card para cumplir con sus requisitos.

<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>