如何对齐按钮并在每行第5个与第6个按钮之间添加间距？

我在框架图上方排布了一组按钮，效果可参考截图：

我需要在每行按钮的第1-5个与第6-10个按钮之间添加间距，匹配参考图效果。此前尝试给第6个按钮设置margin属性，但会将前5个按钮向左挤压，导致其超出框架范围。目前未找到合适的方法在中间添加分隔，同时让所有按钮对齐参考图（图片框架）上的对应方格。

按钮通过如下代码生成：

JS 逻辑 #

var containerDiv = document.querySelector("#main");
let tempCounterBtn = 0;
for (let i = 0; i < 7; i++) {
  let newDiv = document.createElement("div");
  newDiv.id = "div-" + (i + 1);
  containerDiv.appendChild(newDiv);
  for (let x = 0; x < 10; x++) {
    let btn = document.createElement("button");
    btn.id = "button-" + (tempCounterBtn + 1);
    tempCounterBtn++;
    newDiv.appendChild(btn);
  }
}

原有 CSS 样式 #

button {
  background: rgba(0, 0, 0, 0.2);
  color: #a5afaa;
  border: 3.5px solid transparent;
  border-radius: 10px;
  padding: 2.5em 2.5em;
}

button:hover {
  border-color: #fff8cc;
  border: 3.5px solid;
  color: #fff8cc;
  box-shadow: 0em 0em 1em 0em #fff8cc;
  cursor: url('Pictures/gloveCursor.png'), auto;
}

.wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#main {
  position: absolute;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 27px;
  margin-right: 10px;
}

#itemFrame {
  position: relative;
  height: 700px;
  width: 100%;
}

原有 HTML 结构 #

<div class="wrapper">
  <img id="itemFrame" src="Pictures/ItemFrame.png" alt="">
  <div id="main"></div>
</div>

之前给第6个按钮加margin导致前5个按钮被挤压偏移，核心原因是每行的按钮容器没有设置固定布局规则，按钮默认可以被压缩，新增的margin会挤占其他按钮的布局空间。按以下修改即可实现中间加间距且所有按钮精准对齐框架方格：

• 给每行按钮的容器（即循环生成的div-1到div-7元素）添加Flex布局规则，禁止按钮被压缩：

/* 匹配#main下的所有行容器 */
#main > div {
  display: flex;
  width: fit-content;
}
/* 禁止按钮被挤压变形、尺寸偏移 */
#main > div button {
  flex-shrink: 0;
}

• 给每行第6个按钮设置左侧外边距，数值可以对照参考图的间隙大小自行调整：

#main > div button:nth-child(6) {
  margin-left: 24px;
}

如果不想用CSS选择器匹配，也可以在JS生成按钮的逻辑里，判断到是第6个按钮（即x === 5，因为内层循环x从0开始计数）时，直接给按钮添加对应样式类或者内联margin，实现效果完全一致。

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