How it works

In Angular Material 21, responsive page layout is usually built with CSS Grid or Flexbox, while mat-grid-list is best for tile-based blocks with fixed row height. The example below shows a simple responsive grid with equal columns.

One of three

{{'<'}}div class="layout-grid"{{'>'}}
  {{'<'}}div class="layout-grid__item"{{'>'}}One of three{{'<'}}/div{{'>'}}
  {{'<'}}div class="layout-grid__item"{{'>'}}One of three{{'<'}}/div{{'>'}}
  {{'<'}}div class="layout-grid__item"{{'>'}}One of three{{'<'}}/div{{'>'}}
{{'<'}}/div{{'>'}}
layout-grid: display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
On mobile (<576px): grid-template-columns: 1fr;