auto-fit和minmax（）在嵌套网格中不起作用

Question

我有两个嵌套网格 - 一个用于布局，一个用于我的网站部分（假设它是商店中的商品清单）。我的布局网格为整个网站创建一个容器，包括导航栏，边栏，内容等。嵌套网格仅负责商品清单。问题是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>