Search code examples
angularangular-material2

How to set row spacing in Angular Material's Grid?

I can't seem to find a way to set the spacing between rows for Angular Material's Grid List. I've tried gutter size, but it only crops up my tile content. I can't find a plunker or a fiddler for Angular Material, and I know the question is a little bit too specific, but any help would be greatly appreciated.

Solution

  • You can set row spacing by gutterSize property like this 

    <mat-grid-list cols="2" rowHeight="2:1" [gutterSize]="'10px'">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>

    stackblitz demo