多个列表的列表元素的网格

Question

我正在尝试在移动导航菜单上实现类似计算器的图标布局。 图标应像在手机主屏幕上一样显示，所有列表项均根据需要显示 3 列和行数。 现在，如果一个列表只有 2 个项目，例如填充第 1 列和第 2 列，我希望下一个列表从空第 3 列开始。如果它有超过 1 个项目，则应该转到下一行并填充那行。有没有办法只用CSS来实现这一点？

我已经尝试了附加的柔性和网格布局，但由于我无法获得之前提到的行为而陷入困境。我也不想将项目所在的列和行分配给模板区域，因为列表中的项目是动态的并且可能因页面而异。 预先感谢！

我的 HTML：

<div class="entries">
  <ol>
    <li>1a</li>
    <li>2a</li>
    <li>3a</li>
  </ol>
  <ol>
    <li>4b</li>
    <li>5b</li>
  </ol>
  <ol>
    <li>6c</li>
    <li>7c</li>
  </ol>
  <ol>
    <li>8d</li>
  </ol>
  <ol>
    <li>9e</li>
    <li>10e</li>
  </ol>
</div>

我的网格CSS：

.entries {
  display: grid;
  grid-template-rows: 1fr;
  width: 500px;
}

ol {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
  margin: 10px 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
}

网格布局Codepen Flex布局Codepen

Answer 1

为什么不改变 HTML 的结构呢？

div > some spans

使用 CSS 就能轻松实现你的目标。