如何结合CSS @container查询与subgrid实现卡片垂直对齐？

一、Subgrid实现卡片内容垂直对齐示例 #

以下是仅使用Subgrid特性实现卡片标题、主体、页脚垂直对齐的示例代码：

CSS代码 #

body {
  max-width: 500px;
  margin: 1rem auto;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 1rem;
}

.card {
  border: 1px solid #ccc;
  padding: 1rem;
  display: grid;
  grid-gap: 1rem;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

HTML代码 #

<div class="container">
  <div class="card">
    <h2>Title Similique quisquam nesciunt</h2>
    <p>
      Body Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique quisquam nesciunt nihil totam laborum corporis animi expedita molestias, accusantium amet libero at neque id voluptatum, numquam, natus blanditiis eos sit!
    </p>
    <p>Footer nesciunt nihil</p>
  </div>
  <div class="card">
    <h2>Title accusantium amet libero at neque</h2>
    <p>
      Body Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam minima ducimus numquam deleniti perspiciatis expedita nam commodi laboriosam illo! Blanditiis in dolorem eius. Hic assumenda architecto quidem magnam?
    </p>
    <p>Footer dolor sit amet consectetur adipisicing elit</p>
  </div>
</div>

这段代码实现了卡片标题、主体和页脚的垂直对齐效果：

二、添加@container查询后丢失Subgrid功能 #

为了使用CSS @container查询，给每个卡片添加了外层包装器.card-outer-wrapper，修改后的代码如下：

修改后的CSS代码 #

body {
  max-width: 500px;
  margin: 1rem auto;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 1rem;
}

.card {
  border: 1px solid #ccc;
  padding: 1rem;
  display: grid;
  grid-gap: 1rem;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.card-outer-wrapper {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card {
    background-color: aqua;
  }
}

修改后的HTML代码 #

<div class="container">
  <div class="card-outer-wrapper">
    <div class="card">
      <h2>Title Similique quisquam nesciunt</h2>
      <p>
        Body Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique quisquam nesciunt nihil totam laborum corporis animi expedita molestias, accusantium amet libero at neque id voluptatum, numquam, natus blanditiis eos sit!
      </p>
      <p>Footer nesciunt nihil</p>
    </div>
  </div>
  <div class="card-outer-wrapper">
    <div class="card">
      <h2>Title accusantium amet libero at neque</h2>
      <p>
        Body Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam minima ducimus numquam deleniti perspiciatis expedita nam commodi laboriosam illo! Blanditiis in dolorem eius. Hic assumenda architecto quidem magnam?
      </p>
      <p>Footer dolor sit amet consectetur adipisicing elit</p>
    </div>
  </div>
</div>

这段代码在较宽的卡片上能正确触发背景色变化，但原本的Subgrid垂直对齐功能丢失了：

三、问题需求 #

如何修改上述示例，同时实现以下两个功能：

1. 保留Subgrid带来的标题、主体、页脚垂直对齐效果
2. 保留@container查询的响应式样式变化

期望的最终效果：

期望的垂直对齐高亮效果：

内容的提问来源于stack exchange，提问作者Everettss