如何在纯CSS中用动态列垂直排列元素？

Question

我正在尝试创建一个布局，其中元素使用纯 CSS 垂直排列。如果有 2 列和 10 个项目，则前 5 个元素应显示在第一列中，接下来的 5 个元素应显示在第二列中。如果有 11 个元素，则布局应首先在第一列中显示 6 个元素，在第二列中显示 5 个元素。有没有一种方法可以仅使用 CSS 来实现此目的，而不求助于 JavaScript 或其他脚本语言？

我尝试过使用各种CSS属性，例如flex、grid和column-count，但我找不到基于元素数量动态工作的解决方案。

div {
  border: 1px dotted black;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: max-content;
}

<div class="grid-2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
</div>

Answer 1

div {
  border: 1px dotted black;
}
.grid-2 {
  column-count: 2;
  max-width: none;
  column-gap: 0; 
}
.item {
  break-inside: avoid;
  width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  .grid-2 {
column-count: 1;
  }
}

这个CSS会对你有帮助