CODEWITHSUNDEEP
angularangular6
SGR
SGR

Reputation: 2427

To set adjustable row-height in mat-grid-list

I am defining 3 columns using mat-grid-list like this.

HTML

<mat-grid-list [cols]="breakpoint" rowHeight="200px" 
       (window:resize)="onResize($event)">
       <mat-grid-tile>1</mat-grid-tile>
       <mat-grid-tile>2</mat-grid-tile>
       <mat-grid-tile>3</mat-grid-tile>
</mat-grid-list>

Here i have set row height to 200px (rowHeight="200px"), Now height of each row is same as shown in below image.

enter image description here

But i need to set height of the row according the content present inside it.As shown in below image.

enter image description here

How can i achieve this? Here is the stackblitz link.

Upvotes: 3

Views: 2453

Answers (1)

Marek Panti
Marek Panti

Reputation: 126

I had the same problem and it seems that angular material grid does not support this which is really strange, so I used css grid instead. They really do not provide this functionality, altough it might be possible to css hack it, but then it has no point using material grid in this case.

Upvotes: 5

Related Questions