CSS 网格：分数与百分比有什么区别？

Question

分数与百分比有何不同？下面的代码有什么不同吗？

网格模板列：1fr 1fr 1fr 1fr；

网格模板列：25% 25% 25% 25%；

它们在视觉上看起来是一样的。感谢您的帮助。

Answer 1

是的，有区别。如果添加一些间隙，您就可以看到它。百分比宽度是提前计算的，并且仅取决于网格的宽度。在考虑了其他所有因素的宽度（包括间隙）之后，才计算分数宽度。

.d1, .d2 {
  display: grid;
  margin-bottom: 2em;
  border: 3px solid black;
}

.d1>*, .d2>* {
  height: 50px;
  background: #df00007f;
}

.d1 {
  grid-template-columns: repeat(4, 25%);
  gap: 1em;
}

.d2 {
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
}

<div class="d1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>  

<div class="d2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>