Question

如果我减小容器的宽度，为什么细胞需要小于200px？

我认为 minmax 必须保持宽度不小于第一个参数（200px）。

如果删除.a，.k和.g的样式，一切正常。

https://codepen.io/rachelandrew/pen/GZQYQa

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
  background-color: #fff;
}

.box {
  background-color: #444;
  color: white;
}

.a {
  grid-column: auto / span 2;
}

.k {
  grid-column: auto / span 3;
}

.g {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

Answer 1

问题不在于minmax()。问题是auto-fill或grid-column / grid-row添加。

如果您从：

切换

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

To，让我们说：

grid-template-columns: repeat(4, minmax(200px, 1fr));

...然后尊重200px最小值（codepen demo）。

由于网格规范中描述的原因auto-fill不符合200px的最小值（尽管我并非100％确定这一点）。

§ 7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

当给出auto-fill作为重复次数时，如果是网格   容器在相关轴上具有确定的尺寸或最大尺寸   重复次数是最大可能的正整数   这不会导致网格溢出其网格容器（处理   每个曲目作为最大曲目大小调整功能，如果这是明确的或   作为其最小轨道大小调整功能，并将gap带入   帐户）。

^{（强调我的）}

所以，让我们打破这个：

我认为容器确实有一个definite size，因为它是一个块元素，因此它占用了父元素的宽度。
每个曲目都采用max track sizing function，这是minmax()函数中的第二个参数。在这种情况下，那是1fr。
但规范说＆＃34; ...如果确定的话，将每个轨道视为其最大轨道大小调整功能......＆＃34; 。我不确定在此方案中1fr被视为definite size，因此我无法确定此规则是否适用。它似乎适用于输出，但这可能不是原因。
另一个问题是，如果minmax()和auto-fill添加内容被移除（codepen demo），那么grid-column最小值grid-row实际上可以正常工作。< / LI>
我猜测规范中列出的这种行为还有更多。

Answer 2

auto-fill和auto-fit创建隐式网格（我不确定。我在规范中找不到任何内容）。

下一行修复了问题

grid-auto-columns: minmax(200px, 1fr);

列宽小于minmax

2 个答案: