如何让HTML元素位置与间距固定，不受页面尺寸变化影响？

我正在进行一个练习项目，尝试复刻游戏《流放之路》（Path of Exile）的技能树。这需要精准排列每个节点，并确保它们之间的间距恒定，同时支持用户放大页面细致查看节点。

但HTML的特性导致元素会随页面尺寸调整重新排列：最左侧元素贴靠页面左边缘，最右侧元素贴靠右边缘。我目前使用grid布局放置元素，但未找到锁定间距的方法。

编辑1：附上当前相关代码 #

CSS代码 #

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(6, ifr);
  grid-template-rows: 50px 50px 50px;
  grid-gap: 1rem;
  background: rgb(76, 45, 45);
  padding: 0rem;
}

.grid-item {
  background: rgb(76, 45, 45)
}

.grid-item-1 {
  background: rgb(76, 45, 45);
  grid-column-start: 1;
  grid-column-end: 1;
}

.grid-item-2 {
  background: rgb(76, 45, 45);
  grid-column-start: 2;
  grid-column-end: 2;
}

.grid-item-3 {
  background: rgb(76, 45, 45);
  grid-column-start: 3;
  grid-column-end: 3;
}

HTML代码 #

<div class="grid-wrapper">
  <div class="grid-item grid-item-1">
    <button onclick="buttonTest(1)">Test button 1 </button>
  </div>
  <div class="grid-item grid-item-2">
    <button onclick="buttonTest(2)">Test button 2 </button>
  </div>
  <div class="grid-item grid-item-3">
    <button onclick="buttonTest(3)">Test button 3 </button>
  </div>
</div>

编辑2 #

Gary提出的**绝对定位（Absolute Positions）**方案正是我需要的，但我无法找到标记答案为正确的按钮。

内容的提问来源于stack exchange，提问作者Gideon Johnson