<h1><span class="subgrid-supported">Yay, your browser supports subgrid!</span><span class="subgrid-unsupported">Oops, your browser doesn't support subgrid!</span></h1>
<div class="grid">
  <div class="grid__item">
    <h2>Card 1 title</h2>
    <p>I am content that goes into the first card.</p>
    <a href="#">Learn more about card 1</a>
  </div>
  <div class="grid__item">
    <h2>Card 2 title</h2>
    <p>I am content that goes into the second card. Let's put more content in here to make this the longest possible card content in the universe. What else can I put here to make this column longer? This will be much longer content than the content in the first and third cards.</p>
    <a href="#">Learn more about card 2</a>
  </div>
  <div class="grid__item">
    <h2>Card 3 title</h2>
    <p>I am content that goes into the third card.</p>
      <a href="#">Learn more about card 3</a>
    </div>
</div>

body {
  font-family: verdana, sans-serif;
}

p {
  margin: 0;
}

h1 {
  font-size: 20px;
  text-align: center;
  background-color: hotpink;
  color: white;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0;
  margin-bottom: 16px;
}

h2 {
  margin: 0;
}

@supports (grid-template-rows: subgrid) {
  .subgrid-unsupported {
    display: none;
  }
}

@supports not (grid-template-rows: subgrid) {
  .subgrid-supported {
    display: none;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
  gap: 24px;
  margin: auto;
}

.grid__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 4;
  border: solid 1px #ccc;
  border-radius: 4px;
  padding: 20px;
  gap: 32px;
}

h1 {
  text-align: center;
}