<mat-card appearance="outlined">
  <mat-card-title>
    <p>How it works</p>
  </mat-card-title>
  <mat-card-subtitle>
    <p>
      In Angular Material 21, responsive page layout is usually built with CSS Grid or Flexbox, while
      <code>mat-grid-list</code> is best for tile-based blocks with fixed row height.
      The example below shows a simple responsive grid with equal columns.
    </p>
  </mat-card-subtitle>

  <mat-card-content>
    <div class="grid-demo">
      <div class="first-grid-item">
        <span class="grid-item-text">One of three</span>
      </div>
      <div class="second-grid-item">
        <span class="grid-item-text">One of three</span>
      </div>
      <div class="third-grid-item">
        <span class="grid-item-text">One of three</span>
      </div>
    </div>

    <pre class="code-wrapper">
<code class="code blue">{{'<'}}div class="layout-grid"{{'>'}}</code>
  <code class="code pink">{{'<'}}div class="layout-grid__item"{{'>'}}One of three{{'<'}}/div{{'>'}}</code>
  <code class="code pink">{{'<'}}div class="layout-grid__item"{{'>'}}One of three{{'<'}}/div{{'>'}}</code>
  <code class="code pink">{{'<'}}div class="layout-grid__item"{{'>'}}One of three{{'<'}}/div{{'>'}}</code>
<code class="code blue">{{'<'}}/div{{'>'}}</code>
<code class="code grey">layout-grid: display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;</code>
<code class="code grey">On mobile (&lt;576px): grid-template-columns: 1fr;</code>
    </pre>
  </mat-card-content>
</mat-card>
