CODEWITHSUNDEEP
htmlcssangularangular-material
chink
chink

Reputation: 1643

How to display Angular Material cards as columns and not in rows

I am working on an Angular application and as part of it I am trying to create a page with cards being populated vertically and not horizontally. Once 5-6 cards are populated in first column we start filling the second column. My code:

presentations = [1,2,3,4,5,6,7,8]

<div class="row card-data">
    <div class="col-4" *ngFor="let presentation of presentations">
        <mat-card>
            card 1
        </mat-card>
    </div>
</div>

.card-data {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

But this is filling the cards as rows and not columns. What can I try to resolve this?

Upvotes: 0

Views: 1716

Answers (1)

isherwood
isherwood

Reputation: 61036

You probably don't want to mix layout columns and your cards here. Just apply flexbox to the cards and their container.

.card-data {
  max-height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

mat-card {
  padding: 10px;
  margin: 10px;
  background: pink;
}
<div class="row">
  <div class="col-4 card-data">
    <mat-card>
      card 1
    </mat-card>

    <mat-card>
      card 2
    </mat-card>

    <mat-card>
      card 3
    </mat-card>

    <mat-card>
      card 4
    </mat-card>

    <mat-card>
      card 5
    </mat-card>

    <mat-card>
      card 6
    </mat-card>

    <mat-card>
      card 7
    </mat-card>
  </div>
</div>

Upvotes: 2

Related Questions