添加组件

Question

我试图在card_wrapper中布局的卡片之间添加React组件。

＆＃13;

＆＃13;

.card_wrapper {
  max-width: 1200px;
  margin: 10px auto 50px auto;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 80px;
}


.detail_align {
  display: grid;
  grid-column: 1 / span 3;
}

＆＃13;

  <div className={css.card_wrapper}>
      <Card />
      <Card />
      <Card />
      <div className={css.detail_align}>
        <CardDetail />
      </div>
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
  </div>

＆＃13;

＆＃13;

＆＃13;

如果我删除CardDetail组件，则卡会对任何屏幕尺寸进行流畅响应。

当我在HTML中添加CardDetail组件时，添加一个包装div并告诉它跨越3列，网格中的卡片停止响应相同的方式，而不是均匀地凝聚，卡片上最右侧坍塌到没有，然后中间牌崩溃到零，然后左侧牌崩溃，所有都按顺序排列。

下面是@ 1200px，在我调整屏幕大小之前。一切看起来都很好，CardDetail组件在3个跨度中完美定位：

只要用户点击其中一张卡片，就会显示CardDetail组件，并且需要将其放置在网格中的各个行之间。我不能简单地把它放在.card_wrapper网格之外。

Answer 1

我尝试了很多很多选项，CSS-Grid目前似乎并不自动支持这个功能。我改变了一些东西并且能够得到我想要的结果，但是我没有看到任何理由为什么我以前的代码不应该开箱即用。我很好奇为什么这些列会以他们的方式崩溃：

无论如何......我的解决方案：

＆＃13;

＆＃13;

.card_wrapper {
  max-width: 1200px;
  margin: 10px auto 50px auto;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 80px;
  grid-auto-flow: dense; // Fills blank spaces with other cards
}

.detail_align {
grid-column: 1 / span 3;
}

@media (max-width: 1100px) {
  .detail_align {
    grid-column: 1 / span 2;
  }
}


@media (max-width: 750px) {
  .detail_align {
    grid-column: 1;
  }
}

＆＃13;

＆＃13;

＆＃13;