ネストされたグリッド内で自動フィットとminmax（）が機能しません

Question

レイアウト用とサイト用の2つのネストされたグリッドがあります（ショップ内の商品リストです）。私のレイアウトグリッドは、ナビゲーションバー、サイドバー、コンテンツなど、サイト全体のコンテナを作成します。ネストされたグリッドは、商品のリストのみを管理します。問題は、auto-fitとminmax関数がネストされたグリッドで機能しないことです。ケースを確認するにはthis penを確認してください。

最初に、コンテンツの幅を変更しようとすると、アイテムがauto-fitアルゴリズムに従って位置を変更していることがわかります。しかし、外のグリッドに対してdisplay: grid;のコメントを外すとすぐに、応答性が損なわれます。なぜこれが起こっているのか、どのように修正できるのか説明してください。

.outer-grid { 
 
/* display: grid; */ 
 
    grid-template-columns: 1fr 700px 1fr; 
 
} 
 

 
.inner-grid { 
 
    grid-column: 2; 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
 
} 
 

 
.item { 
 
    background: red; 
 
    border: 1px solid black; 
 
}

<div class="outer-grid"> 
 
    <div class="inner-grid"> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    </div> 
 
</div>

Answer 1

問題がauto-fitとminmax機能は、ネストされたグリッドでは動作しないということです。

私は彼らがうまくいくと思います。問題は他にもあるようです。

ネストされたグリッドは、固定幅（700px）の列に存在します。プライマリコンテナは、その列を縮小する理由がないので、ネストされたグリッドのauto-fit関数をトリガします。

はここでは検討する必要があります何か：

revised codepen

.outer-grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr repeat(1, minmax(100px, 700px)) 1fr; 
 
} 
 

 
.inner-grid { 
 
    grid-column: 2; 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
 
} 
 

 
.item { 
 
    background: red; 
 
    border: 1px solid black; 
 
}

<div class="outer-grid"> 
 
    <div class="inner-grid"> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    <div class="item">Item</div> 
 
    </div> 
 
</div>