自动拟合和minmax（）在嵌套网格中不起作用

Question

我有两个嵌套的网格-一个用于布局，另一个用于我网站的一部分（假设这是商店中的商品清单）。我的布局网格为整个站点创建了一个容器，包括导航栏，边栏，内容等。嵌套网格仅负责商品清单。问题是，auto-fit和minmax功能在嵌套网格工作。您可以检查这支笔以查看情况。

首先，尝试更改内容的宽度，您会看到项目正在根据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嵌套网格中的函数。

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

修改后的代码笔

.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>