添加组件后，CSS Grid卡不再响应

Question

我试图在card_wrapper内布置的卡之间添加React组件。

.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; 
 
}

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

如果我删除了CardDetail组件，该卡流体响应任何屏幕尺寸。

当我在HTML中添加CardDetail组件后面，添加一个包装DIV，并告诉它跨越网格停止响应以同样的方式3列，卡，和而不是在冷凝均匀，卡最右边的一面坍塌为无，然后中间的牌倒下，然后左边的牌全部按顺序倒下。

下面是@ 1200像素，之前我调整屏幕。一切正常并且CardDetail部件定位完美跨越3个跨度：

每当用户点击的一个卡，并且将需要被定位在所述网格内的各种行之间的CardDetail部件将被显示。我不能简单地将它放在.card_wrapper网格之外。

Answer 1

我尝试了很多很多选项，而CSS-Grid目前似乎并未自动支持此功能。我改变了一些东西，并能够得到我想要的结果，但我没有看到任何原因，为什么我以前的代码不应该开箱即用。我很好奇，为什么柱子倒塌，他们的方式：

反正...我的解决方案：

.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; 
 
    } 
 
}