Próbuję mieć siatkę karty z materiałem kątowym

Question

Próbowałem mieć siatkę z karty przy użyciu materiału kątowego. Używam więc dyrektyw md-grid-list i md-card. ale wynik jest dość brzydki, i nie jestem pewien, aby zrozumieć, jak działa md-row-heigh (ratio), mam dokumentację, ale nie wiele mówi.

Oto, co robiłem do tej pory: http://codepen.io/stunaz/pen/qdQwbq, Próbuję mieć responsywną siatkę z kartą, nie jestem nawet pewien, czy lista md-grid jest tutaj odpowiednia.

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

Jestem otwarty na wszelkiego rodzaju pomoc.

Answer 1

Możesz użyć Flex Box zamiast listy md-grid, aby uzyskać ten sam efekt.

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

Spójrz na ten przykład z numerem stałym kart z rzędu:

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

oraz reagującego przykład za pomocą Wrap layout

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

nadzieję, że to co chciałeś.

Answer 2

Użyj tego znacznika HTML i zmień numer flex na karcie md, aby spełnić Twoje wymagania.

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