需要帮助使用网格CSS创建此响应式堆叠卡的外观。下面的代码

Question

我正在尝试使用CSS网格来实现此堆叠卡容器。我知道网格可能很难，因为他们的属性有很多了解。最终堆叠的卡将是3行，希望使用

`grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));`

最终堆叠的卡片外观

我想但是，使用网格而不是使用Display创建幻觉：绝对和使用顶部/底部或负距离。 想法是在此处使用网格来创建此故障：

使用网格堆叠卡的幻觉

我的 知道我如何使用网格容器来实现第二张图片（被堆叠的卡片幻觉）？侧卡在右侧，底部卡在主卡的底部？

以下是我的启动代码，我正在使用React.js：

<div className={classes.outerCard}>
          <div className={classes.mainCard}>
            <h2 className={classes.title}>{title}</h2>
          </div>
          <div className={classes.sideCard}></div>
          <div className={classes.bottomCard}>
            <h5 className={classes.subtitle}>{subtitle}</h5>
          </div>
        </div>

请让我知道您的想法或网格知识！任何事情都会有所帮助。似乎

grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

是保持其响应迅速而没有任何媒体查询的最佳选择，它将设置一个网格容器，在这种情况下，它具有灵活数量的列数，然后将3列尽可能长，然后分解为2列，然后最终只有移动的一行。

Answer 1

使用Grid，您需要为所有DIV指定开始/端列和行，因为它们具有突出边缘的方式。您将需要的最小行数为5。我设置了估计的固定列和粗糙尺寸以匹配您的图像；您必须进行调整才能使他们响应迅速。

.outerCard {
  display: grid;
  grid-template-columns: 50px 20px 200px 30px 60px;
  grid-template-rows: 60px 40px 300px repeat(2, 40px);
  width: 360px;
  background-color: LightGoldenRodYellow;
}

.mainCard { 
  grid-area: 2 / 2 / 4 / 4;
  background-color: LightGrey;
}

.sideCard { 
  grid-area: 3 / 4 / 4 / 5;
  background-color: LightPink;
}

.bottomCard { 
  grid-area: 4 / 3 / 5 / 5;
  background-color: LightCoral;
}

<div class="outerCard">
  <div class="mainCard">
    <h2 class="title">title</h2>
  </div>
  <div class="sideCard"></div>
  <div class="bottomCard">
    <h5 class="subtitle">subtitle</h5>
  </div>
</div>