<section>
  <h2 class="section-title">Regular:</h2>
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

<section class='narrower'>
  <h2 class="section-title">More squished version:</h2>
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

section {
  container-type: inline-size;
}

.narrower {
  width: 80%;
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr));

  container-type: inline-size;
}

.grid > :first-child {
  /*                      2 columns + gap */
  @container (width > calc(30ch * 2 + 1rem)) {
    grid-column: span 2;
    background: rebeccapurple;
  }

  /*                      3 columns + gaps */
  @container (width > calc(30ch * 3 + 2rem)) {
    grid-column: span 1;
    background: olive;
  }
}

@layer not-demo-related {
  body {
    display: grid;
    gap: 2rem;
    font-family: system-ui;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .grid {
    padding: 1rem;
    border: 3px solid dodgerblue;
  }

  .grid > * {
    padding: 1rem;
    background: orangered;
  }
}