<section class="cards" lang="en">
  <div class="card">
    <header>
      <h2>Some really really long heading</h2>
    </header>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident laboriosam aspernatur explicabo.</p>
    <footer>Footer content Lorem ipsum dolor sit.</footer>
  </div>
  <div class="card">
    <header>
      <h2>Some heading</h2>
    </header>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    <footer>Footer content Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio voluptates nihil magnam dignissimos, alias quos nisi.</footer>
  </div>
  <div class="card">
    <header>
      <h2>Some heading</h2>
    </header>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident laboriosam aspernatur explicabo. Lorem ipsum dolor sit amet.</p>
    <footer>Footer content</footer>
  </div>
</section>
.cards {
  --gap: 20px;
  --max-width: 40rem;
  --cols: 3;
  
  /* Calculations */
  --preferred-value: ((var(--max-width) - var(--gap) * 2) - 100%) * 999;
  --min-value: 100% / var(--cols) - var(--gap);
  
  /*max-width: min(100%, 1000px - var(--gutter) * 2);*/
  margin: var(--gap) auto;
  padding: var(--gap);
  display: grid;
  grid:
    repeat(3, max-content) /
    repeat(
      auto-fill,
      minmax(
        clamp(var(--min-value), var(--preferred-value), 100%),
      1fr)
    );
  gap: var(--gap);
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  background: hsl(180, 25%, 65%);
  color: #332182;
  overflow: hidden;
  border-radius: 5px;
  gap: 0;
}

.card > * {
  padding: var(--gap);
}

header {
  line-height: 1.25;
  color: #332182;
  display: grid;
  align-items: end;
  hyphens: auto;
  border-bottom: 1px solid hsl(180, 15%, 50%);
}

footer {
  background: hsl(180, 25%, 75%);
}



html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: 'Inter', sans-serif;
  color: #2b2b2b;
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.