尝试使用网格或Flexbox获取具有微小间距的相等列

我想知道我是不是从错误的角度来看待这个问题。

我正在尝试使项目的间距相等,每行有一个固定的(5/)数字。前导列或最后一列上不应有左或右边距。排水沟或裂缝应该是灵活的/响应的。

html格式

<ul>
  <li><span>01</span></li>
  <li><span>02</span></li>
  <li><span>03</span></li>
  <li><span>04</span></li>
  <li><span>05</span></li>
  <li><span>06</span></li>
  <li><span>07</span></li>
  <li><span>08</span></li>
  <li><span>09</span></li>
  <li><span>10</span></li>
  <li><span>05</span></li>
  <li><span>06</span></li>
  <li><span>07</span></li>
  <li><span>08</span></li>
  <li><span>09</span></li>
</ul>

css

ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1fr;
}

li {
  line-height: 3em;
  text-align:center;
 }

li:nth-child(5n+1) {
  text-align:left;
}
li:nth-child(5n) {
  text-align:right;
}

span {
  border: 1px solid fuchsia;
  border-radius: 50%;
  padding: 0.5em; 
}

/* Resets & Styling */
ul {
  background-color: lightblue;
  list-style: none;
  margin: 0;
  padding: 0;
}

我还创造了一个 Codepen