CODEWITHSUNDEEP
angular5
abdalrahman makahleh
abdalrahman makahleh

Reputation: 53

How to display two mat-card at the same row

i have unknown number of card i want to ngfor on them and display every two card in one row 

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>{{user.firstName}}</mat-card-title>
    <mat-card-subtitle>{{user.lastName}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </mat-card-content>
  <mat-card-actions>

  </mat-card-actions>
</mat-card>

i'm using angular 5 and material design 6 is there anyway to do that ?

Upvotes: 4

Views: 14879

Answers (2)

今際のアリス
今際のアリス

Reputation: 354

Try adding display: inline-block !important to your .example-card class.

Upvotes: 1

Tetyana Savenko
Tetyana Savenko

Reputation: 149

Spent hours on this... turned out to be trivial: simply add float:left to your class CSS. In my case it looked like this:

.example-card {
    max-width: 300px;
    margin-bottom: 50px;
    float: left;
}

Upvotes: 14

Related Questions