Components

Grid List

Angular Material Grid List displays collections of items, such as images or cards, in a grid layout. Tiles are laid out in a fixed number of columns whose height comes from a ratio or a set number of pixels, and any tile can span more than one column or row to break the rhythm. BuilderKit restyles the tiles and the gaps between them so the grid matches the rest of the design system.

Official docs API reference

For a single item that carries its own header, media and actions, the card component is the one to reach for.

Example

Below is an example of how BuilderKit restyles the Angular Material Grid List and gives it a more modern appearance.

Basic grid

Dynamic grid

One

Two

Three

Four

<mat-grid-list cols="2" rowHeight="2:1">
  <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>

Grid list with gutters between tiles

The gutter is the gap around every tile. Widen it and the tiles read as separate cards, close it up and they read as one continuous surface.

<mat-grid-list cols="3" rowHeight="3:2" gutterSize="16px">
  <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-tile>5</mat-grid-tile>
  <mat-grid-tile>6</mat-grid-tile>
</mat-grid-list>