Question

我有两个嵌套网格 - 一个用于布局，另一个用于我网站的部分（让我们说它是商店中的商品列表）。我的布局网格为整个网站创建了一个容器，包括导航栏，侧边栏，内容等。嵌套网格仅负责商品列表。问题是auto-fit和minmax函数不能在嵌套网格中工作。您可以查看this pen以查看案例。

首先，尝试更改内容的宽度，您会看到项目正在根据auto-fit算法更改其位置。但是，只要您为外部网格取消注释display: grid;，它的响应性就会被破坏。你能解释一下为什么会发生这种情况以及如何解决这个问题吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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>

自动调整和minmax（）不在嵌套网格中工作

1 个答案: