コンポーネント追加後にCSSグリッドカードが応答しなくなる

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コンポーネントを削除した場合、カードは任意の画面サイズに流動的に対応しています。

私はラッピングdiv要素を追加し、3列にまたがるためにそれを教えてくれ、背中HTMLでCardDetailコンポーネントを追加すると、グリッド内のカードが同じように応答を停止し、代わりに均等に凝縮、カード上一番右側の崩壊が無くなり、中央のカードが何もなくなり、左側のカードが崩壊する。以下は

私は、画面のサイズを変更する前に、1200px @です。すべてが正常に見えると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; 
 
    } 
 
}

列は彼らがいたという道を潰した理由私は好奇心が強いです