Css 自动调整和最小值（）don'；不能在嵌套网格中工作

我有两个嵌套网格-一个用于布局，一个用于我的站点部分（假设它是商店中的商品列表）。我的布局网格为整个站点创建了一个容器，包括导航栏、侧栏、内容等，嵌套网格只负责货物列表。问题是

auto-fit

和

minmax

函数在嵌套网格中不起作用。你可以去看看这个案子

首先，尝试更改内容的宽度，您将看到项目正在根据

自动调整算法更改其位置。但一旦您取消注释
display:grid对于外部网格，它会被破坏。你能解释一下为什么会发生这种情况，以及我如何解决它吗


。外部网格{
/*显示：网格*/
网格模板列：1fr 700px 1fr；
}
.内部网格{
网格柱：2；
显示：网格；
网格模板列：重复（自动拟合，最小值（100px，1fr））；
}
.项目{
背景：红色；
边框：1px纯黑；
}

项目
项目
项目
项目
项目

问题是
auto-fit
和
minmax
函数在嵌套网格中不起作用

我认为它们确实有效。问题似乎是别的

嵌套网格存在于具有固定宽度（700px）的列中。主容器没有理由收缩该列，这将触发嵌套网格中的
auto-fit
函数

以下是您可能需要考虑的事项：



。外部网格{
显示：网格；
网格模板列：1fr重复（1，最小值（100px，700px））1fr；
}
.内部网格{
网格柱：2；
显示：网格；
网格模板列：重复（自动拟合，最小值（100px，1fr））；
}
.项目{
背景：红色；
边框：1px纯黑；
}

项目
项目
项目
项目
项目
Ahh，我在想，但自己解决不了。需要更多的网格练习。。您的解决方案非常好，谢谢！：）