网格显示列宽不等

Question

With

grid-template-columns:1fr 1fr;

在小屏幕上，这两列有不同的宽度。我无法理解。 谢谢您的任何帮助。

- Mityu

---

请提供足够的代码以重现问题。 - Michael Benjamin

更多的信息会更好，但我没有对这个问题进行负面评价。这是CSS Grid的典型问题，所以我们可以很容易地提供帮助。 - tzi

Answer 1

在理想情况下，这两个单元格应该具有相同的大小。

但是每个单元格都有一个最小的大小！它被定义为最小内容宽度。例如：它包含的单词越多，按钮越大，或者图片越大。

为了避免这种情况，您应该对每个列定义使用minmax（0，1fr）。它允许您指定1fr（一分数）是该列的最大宽度。

总之，请使用以下代码：

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

Here is a live demo of the problem and solution.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid--fix {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Demo styles */
.grid {
  grid-gap: 20px;
  max-width: 400px;
}

.cell {
  background: hotpink;
  text-align: center;
  padding: 1em;
}

<p>Exact same cells</p>
<div class="grid">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2</div>
</div>

<p>The cells adapt their size to contain their content</p>
<div class="grid">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2 is biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig</div>
</div>

<p>This behaviour could be disabled with <code>minmax(0, 1fr)</code></p>
<div class="grid grid--fix">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2 is biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig</div>
</div>

- tzi

---

在问题中提供如此少的信息时，这么早回答实在为时过早。你最多只是猜测 OP 的问题将会是什么。同样，在 OP 提供最低预期信息/质量之前就提供答案会向他们和其他查看者发送错误的信号，即鼓励他们提出这种部分形成的问题，而不是提供一个清晰的问题陈述以及一个 MCVE 代码，该代码不能按预期/理解工作。 - TylerH

我理解您的立场，但我不同意对问题的评估。我已经找到并且认为理解问题足够了，这里没有猜测。 - tzi

谢谢，这非常有用。 最后我发现我忘记了一个“margin-right”规则，它是从基础CSS继承而来的。 不过你的答案非常好，我接受它作为解决方案。 - Mityu