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

The problem is that auto-fit and minmax functions don't work in the nested grid.

我认为它们确实有效。问题似乎出在其他地方。

您的嵌套网格位于固定宽度 (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>

auto-fit 和 minmax() 在嵌套网格中不起作用

auto-fit and minmax() don't work inside nested grid

css

css-grid