<h2 mat-dialog-title class="title">Grid system</h2>

<mat-dialog-content>
  <div style="margin-top: 24px; display: flex; justify-content: flex-end">
    <mat-grid-list cols="2" rowHeight="52" gutterSize="24" style="width: 200px">
      <mat-grid-tile [colspan]="1" [rowspan]="1">
        <div class="first-grid-item-2">
          <span>1</span>
        </div>
      </mat-grid-tile>
      <mat-grid-tile [colspan]="1" [rowspan]="1">
        <div class="second-grid-item-2">
          <span>2</span>
        </div>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

  <div style="margin-top: 24px">
    <mat-grid-list cols="2" rowHeight="52" gutterSize="24">
      <mat-grid-tile [colspan]="1" [rowspan]="1">
        <div class="first-grid-item-2">
          <span>1</span>
        </div>
      </mat-grid-tile>
      <mat-grid-tile [colspan]="1" [rowspan]="1">
        <div class="second-grid-item-2">
          <span>2</span>
        </div>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

  <div style="margin-top: 24px">
    <mat-grid-list cols="3" rowHeight="52" gutterSize="24">
      <mat-grid-tile [colspan]="1" [rowspan]="1">
        <div class="first-grid-item-2">
          <span>1</span>
        </div>
      </mat-grid-tile>
      <mat-grid-tile [colspan]="1" [rowspan]="1">
        <div class="second-grid-item-2">
          <span>2</span>
        </div>
      </mat-grid-tile>
      <mat-grid-tile [colspan]="1" [rowspan]="1">
        <div class="third-grid-item-2">
          <span>3</span>
        </div>
      </mat-grid-tile>
    </mat-grid-list>
  </div>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button class="button" mat-stroked-button color="primary" (click)="close()">CANCEL</button>
  <button class="button" mat-raised-button color="primary" (click)="close()">OK</button>
</mat-dialog-actions>
