网格显示列的宽度不相等

Question

和

grid-template-columns:1fr 1fr;

2 列在小（窄）屏幕中具有不同的宽度。我无法理解。感谢您的任何帮助。

Answer 1

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

但是每个单元格都有一个最小尺寸！它被定义为最小内容宽度。例如：较大的词、较大的按钮或它包含的最大图像。

为避免这种情况，您应该使用minmax(0, 1fr)for 每个列定义。它允许您说1fr，一个分数是列的最大宽度。

总结一下，使用这个代码：

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

这是问题和解决方案的现场演示。

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