【CSS】横並びの子要素、孫要素の高さをsubgridを使って簡単に揃える方法

    <main class="main">
      <div class="card-container">
        <a class="card">
          <img
            class="card-thumbnail"
            src="/images/icatch_chatGPT.png"
            alt="chatGPT"
          />
          <h2 class="card-title">
            AWSのS3のファイルを表示するLambda関数を作ってAPIGatewayから実行するまでをChatGPT先生に教えてもらった
          </h2>
          <p class="card-profile">
            <span>
              <img
                src="/images/avatar.png"
                height="30"
                width="30"
                class="card-profile-img"
            /></span>
            <span>reiko suzuki</span>
          </p>
          <ul class="card-label">
            <li>Python</li>
            <li>技術情報</li>
            <li>やってみた</li>
          </ul>
          <p class="card-date">2023.11.30</p>
        </a>
        <a class="card"><!--省略--></a>
        <a class="card"><!--省略--></a>
        <a class="card"><!--省略--></a>
        <a class="card"><!--省略--></a>
        <a class="card"><!--省略--></a>
      </div>
    </main>
  

  .card-container {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
  

.card {
  border-radius: 2px;
  background: #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.18);
  color: #000;
}

.card :is(.card-title, .card-profile, .card-label, .card-date) {
  padding: 12px 15px;
}

.card .card-title {
  font-size: 18px;
}

.card-profile {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
}

.card-profile img {
  border-radius: 50%;
  margin-right: 8px;
}

.card-label {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.card-label li {
  max-height: 2em;
  padding: 2px 8px 3px;
  background-color: #bbb;
  color: #fff;
}

.card-date {
  color: #888;
  font-size: 12px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
}

.card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  gap: 12px;
}