添加組件後，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; 
 
    } 
 
}