Grid list is not responsive ?

Bug, feature request, or proposal:

Hi guys. I’m trying to have a collection of cards (on multiple line). So I thought that using a Grid list would do the job. So I’ve used a grid list with 4 columns. I have something like 22 cards… But When I’m trying to resize the browser to see the “responsive” side effect, What I see is that cards are just shrinked … I thought that the number of columns will be reduced until to have just one column.

What is the expected behavior?

When reducing the browser, cards should not be shrinked and should be moved below, on the next row, keeping its size.

What is the current behavior?

Cards are shrinked and contents inside the cards disappear.

What are the steps to reproduce?

my-main-component.html

<md-grid-list cols="4">
  <md-grid-tile *ngFor="let reading of data.value"><rbwc-measurement-card [data]="reading" class="card-border"></rbwc-measurement-card></md-grid-tile>
</md-grid-list>

my-rbwc-measurement-card-component.html:

<md-card class="measurement-card" [style]="setCardAlarmStyle()">
  <md-card-header>
    <div md-card-avatar class="measurement-header-image" [style]=setMeasurementAvatar(data.name)></div>
    <md-card-title class="measurement-bold title-layout">{{data.name}}</md-card-title>
  </md-card-header>
  <md-card-content>
    <div> <span class="measurement-bold">Reading:</span> <span [style]="readingFont()">{{data.reading.value}} {{data.reading.units}}</span></div>
    <div *ngIf="data.trend"><span class="measurement-bold">Trend:</span> <span [style]="trendFont()">{{data.trend.value}} {{data.trend.units}}</span></div>
    <form>
      <fieldset *ngIf="data.limits" class="groupBox-border">
        <legend class="groupBox-text-size">Limits:</legend>
        <div *ngFor="let limit of data.limits">{{limit.name}}: <md-form-field floatPlaceholder="never" [style.width.px]="70"><input mdInput [disabled]="disableEdit()" placeholder="{{limit.name}}" type="number" value="{{limit.value}}"><md-icon [ngClass]="{'md-dark md-inactive': disableEdit()}" mdSuffix>mode_edit</md-icon></md-form-field> <span *ngIf="limit.name != limitsNames.TrendLimit">{{limit.units}}</span> <rbwc-trend-limit-units-options *ngIf="limit.name == limitsNames.TrendLimit" [trendReading]="limit"></rbwc-trend-limit-units-options></div>
      </fieldset>
    </form>
  </md-card-content>
  <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
</md-card>

Am I missing something or doing something wrong ? Thank you in advance for your help

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 4.4.0-RC.0 Material: 2.0.0-beta.10 Typescript: 2.5.2 Browser: Chrome (for now)

Multiple cards look before resizing the browser:

Multiple cards look after resizing the browser:

[TitaneBoy]

@leocaseiro : Thank you for your references… In #6777 , I could find a comment that talk about an responsive angular article that just saved my life. That was what I needed.

Thanks again

[PurpleEdge2214]

It would be good if the Angular Material website made some mention of responsive layout!