html - 当单词具有不同数量的带有 CSS 的字符时，如何确保单词间隔均匀？

Question

https://imgur.com/HKXHUwe

我正在修补 CSS 网格系统，并且正在制作一个简单的导航栏。 (我知道 flexbox 可能更适合这项任务)。

这些按钮的标题为:按顺序工作、恢复和元素。

我的问题是，因为 Resume 和 Projects 的字符数比 Work 多，当缩小到移动设备时，Work 的间距很好，左边有足够的边距，但 Projects 最终被迫进一步向右移动，最终偏离中心。他们每个人都得到了 1fr 的空间。我能否以某种方式使其动态缩放？

我在想，也许我可以引入一个媒体查询来将字体缩小到一定宽度以下，一切都会好起来的，但我会很感激任何其他建议，因为我更喜欢大而“可触摸”的东西屏幕尺寸。提前致谢。

Answer 1

正如您所说 - flexbox 更适合您想要实现的目标。如果你仍然想使用网格，你应该知道不同长度的单词之间的空间不能相等，除非你给不同的列适当的长度。这是我所能达到的最好成绩:

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(min-content, 1fr));
}
.item {
  padding: 0 1rem;
  text-align: center;
  border: 1px dashed #000;
}

<div class="grid">
  <div class="item">WORK</div>
  <div class="item">RESUME</div>
  <div class="item">PROJECTS</div>
</div>