<div class="grid">
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi expedita veritatis quibusdam quas facilis soluta deserunt aliquid molestias unde culpa. Voluptatibus doloribus doloremque harum ratione?</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eligendi itaque odio aliquid excepturi vel corrupti deserunt veniam fuga perspiciatis! Nihil obcaecati quos similique consequatur dolore. Natus, corrupti.</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur corporis porro mollitia praesentium quis minus.</p>
  </div>
</div>
.grid {
  --gap: 20px;
  display: grid;
  gap: var(--gap);

  /* Using min() */
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(
          (40rem - 100%) * 999,
          100%),
        1fr
      )
    );

  /* Using clamp() */
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        clamp(
          33.3333% - var(--gap),
          (40rem - 100%) * 999,
          100%),
        1fr
      )
    );
}

.item {
  padding: 1.35rem;
  background: #90bcbc;
  border-radius: 4px;
}

h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}


body {
  padding: 20px;
  color: #332182;
}

External CSS

  1. https://codepen.io/dannievinther/pen/af7e27ae86cdc49fbf85e54ae30c50eb

External JavaScript

This Pen doesn't use any external JavaScript resources.