CODEWITHSUNDEEP
angularangular-flex-layoutangular-material-7
Greggy
Greggy

Reputation: 719

Angular material - flex layout and cards

I have problem with behavior of flex layout in application based on Angular Material. I want to have simple "card grid" layout with 3 cards in row (the biggest screens), 2 cards on medium size and 1 card at the smallers screens. The problem is when I have only 1 card in the last row on biggest screen, because last card width is 100% of screen width. How to avoid this problem?

Here is my current code. 

<div class="page-wrapper">
  <div fxLayout="row wrap" fxLayoutGap="16px" class="align" *ngIf="!loading">
    <mat-card fxFlex.lg="calc(33% - 16px)" fxFlex.lt-lg="calc(50% - 16px)" fxFlex.xs="calc(100% - 16px)"
              *ngFor="let post of posts">
      <mat-card-header>
        <mat-card-title>{{ getCleanString(post.title.rendered) }}</mat-card-title>
        <mat-card-subtitle>{{ post.date_gmt | date }}</mat-card-subtitle>
      </mat-card-header>
      <img matCardImage [src]="post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url"
           class="card-image">
      <mat-card-content [innerHTML]="post.excerpt.rendered"></mat-card-content>
      <mat-card-actions align="start">
        <a mat-button color="primary" [href]="post.link">Czytaj więcej</a>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

Edit: There is no problem with gap between cards. The problem is that the last card has 100% width of whole layout (not 1/3 as other).

example:

Upvotes: 1

Views: 8623

Answers (1)

Mendy
Mendy

Reputation: 8692

Try adding 0 0 to fxFlex.lg like this: fxFlex.lg="0 1 calc(33% - 16px)".

This will remove the flex-grow.

Note: You will have to add margin-right: 16px; to the last element to get the correct alignment

Upvotes: 3

Related Questions