Angular Material 2 md-card responsive columns

Question

I'm searching for an Angular 2/4 example of this layout. I need to start with two columns of cards (2 in left col, 1 in right col). However, if the screen is small, they should collapse to one column. I can do it in CSS with divs, but there must be an easy way in Material 2--there are lots of Material 1 examples.

This code is adapted from an Angular Material 1 answer, but it's not working (I changed "row" to "column" hoping that would work but I just get one column with the three cards):

how do i create a grid of cards with angular material?

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 1</h2>
      </md-card-content>
    </md-card>

    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 2</h2>
      </md-card-content> 
    </md-card>
</div>

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Right Column </h2>
      </md-card-content>
    </md-card>
</div>

From the answer: "In this example, you will have two cards (40% each) and when the screen resizes to -sm, the cards will be at 80%."

score 8 · Answer 1 · answered Sep 28 '17 at 07:18

First, add @angular/flex-layout package in your app. Read more about "flex-layout". Then, you need to import FlexLayoutModule in your app.module.ts imports entry:

import { FlexLayoutModule } from '@angular/flex-layout';

....
@NgModule({
    imports: [
        // other modules
        // .....
        FlexLayoutModule
    ],
    ....

You can then use "flex-layout" in your app. To make the cards responsive as you have mentioned, you can use the following template:

<div fxLayout="row" fxLayout.xs="column">
    <md-card fxFlex="40%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Left Card 1</h2>
        </md-card-content>
    </md-card>

    <md-card fxFlex="40%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Left Card 2</h2>
        </md-card-content>
    </md-card>

    <md-card fxFlex="20%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Right Column </h2>
        </md-card-content>
    </md-card>
</div>

Link to stackblitz demo.

thx. Your example produces 3 columns on a large screen. I'm looking for 2 cols--one of which has 2 rows--and then all in 1 column on a small screen. I'm looking at the flex-layout docs now. They have an example that's close to what I want here: https://tburleson-layouts-demos.firebaseapp.com/#/responsive — beachCode, Sep 28 '17 at 08:21

beachCode · Answer 2 · 2017-09-29T18:51:59.757

I found a CSS flex box solution—I’d still prefer an Angular flex layout answer, but this will do for now. Thanks to @Faisal for pointing me in the right direction. This produces two columns on a large screen with two rows in the first column. If the screen is small, the layout changes to one column with three rows.

I based the code on this example: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

HTML:

<div id='main'>
    <div id='col1'>
        <article>article</article>
        <nav>nav</nav>
    </div>
    <aside>aside</aside>
</div>

CSS:

#main {
  min-height: 100px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row;
}

#main > col1 {
  min-height: 100px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
}

#col1 > article {
  margin: 4px;
  padding: 5px;
  border: 1px solid #cccc33;
  border-radius: 7pt;
  background: #dddd88;
  flex: 3 1 60%;
  order: 2;
}

#col1 > nav {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #dddd88;
  flex: 1 6 20%;
  order: 1;
}

#main > aside {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #ccccff;
  flex: 1 6 20%;
  order: 3;
}

/* Too narrow to support three columns */
@media all and (max-width: 640px) {
  #main, #page {
      flex-direction: column;
  }

  #col1 > article, #col1 > nav, #main > aside {
  /* Return them to document order */
      order: 0;
  }

  #main > col1, #main > aside {
      min-height: 50px;
      max-height: 50px;
  }
}

score 0 · Answer 3 · answered Jan 22 '19 at 13:04

I had the exact same requirement and I did this using with mat-grid-list containing the mat-cards. I used mat-grid-list to make my list responsive so that it can adjust the no. of elements in a row according to screen size. Here is what I did:

<mat-grid-list [cols]="breakpoint" rowHeight="4:5" (window:resize)="onResize($event)" >
  <mat-grid-tile *ngFor="let product of pagedList">
    <div>
      <mat-card class="example-card">
          mat-card content here..
      </mat-card>
    </div>
  </mat-grid-tile>
</mat-grid-list>

This is what component looks like:

  pagedList: Product[]= [];
  breakpoint: number = 3;  //to adjust to screen

  ngOnInit() {
        this.breakpoint = (window.innerWidth <= 800) ? 1 : 3;
        this.pagedList = <SOME LIST>;
    });
  }

  onResize(event) { //to adjust to screen size
    this.breakpoint = (event.target.innerWidth <= 800) ? 1 : 3;
  }

You can also add pagination to it. Check my answer here How to use angular-material pagination with mat-card?

Angular Material 2 md-card responsive columns

3 Answers3