overview.component.html

<ngx-breadcrumbs title="Overview" [crumbs]="crumbs"></ngx-breadcrumbs>

<div fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutGap="32px grid">
  <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
    <mat-card><a routerLink="/dashboard/grid/grid-list">Grid List</a></mat-card>
  </div>
  <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
    <mat-card><a routerLink="/dashboard/grid/crud-table">CRUD Table</a></mat-card>
  </div>
  <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
    <mat-card><a routerLink="/dashboard/experiments/layout">Layout</a></mat-card>
  </div>
  <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
    <mat-card><a routerLink="/dashboard/experiments/animations">Animations</a></mat-card>
  </div>
  <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
    <mat-card><a routerLink="/dashboard/widgets">Widgets</a></mat-card>
  </div>
  <div fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%">
    <mat-card><a routerLink="/dashboard/settings">Settings</a></mat-card>
  </div>
</div>