<mat-card appearance="outlined">
  <mat-card-title>
    <p>Equal width</p>
  </mat-card-title>
  <mat-card-subtitle>
    <p>
      Equal-width columns are easiest to maintain with CSS Grid.
      Use <code>repeat(..., minmax(0, 1fr))</code> to keep each column the same width.
    </p>
  </mat-card-subtitle>

  <mat-card-content>
    <div class="equal-grid equal-grid_two">
      <div class="first-grid-item">
        <span>1 of 2</span>
      </div>
      <div class="second-grid-item">
        <span>2 of 2</span>
      </div>
    </div>

    <div class="equal-grid equal-grid_three">
      <div class="first-grid-item">
        <span>1 of 3</span>
      </div>
      <div class="second-grid-item">
        <span>2 of 3</span>
      </div>
      <div class="third-grid-item">
        <span>3 of 3</span>
      </div>
    </div>

    <pre class="code-wrapper">
<code class="code blue">{{'<'}}div class="equal-grid equal-grid_three"{{'>'}}</code>
  <code class="code pink">{{'<'}}div class="equal-grid__item"{{'>'}}1 of 3{{'<'}}/div{{'>'}}</code>
  <code class="code pink">{{'<'}}div class="equal-grid__item"{{'>'}}2 of 3{{'<'}}/div{{'>'}}</code>
  <code class="code pink">{{'<'}}div class="equal-grid__item"{{'>'}}3 of 3{{'<'}}/div{{'>'}}</code>
<code class="code blue">{{'<'}}/div{{'>'}}</code>
<code class="code grey">equal-grid: display: grid; gap: 24px;</code>
<code class="code grey">equal-grid_three: grid-template-columns: repeat(3, minmax(0, 1fr));</code>
    </pre>
  </mat-card-content>
</mat-card>
