这看起来像是column-count的工作，除非我误解了这个问题：

div {border: 1px dotted black;}

.grid-2 {
  column-count: 2;
}

<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 class="item">11</div>
</div>

如果你有10个项目，将有两个相等的列，但增加一个额外的项目意味着1-6将在第一列。

solutionralph.m给我的正是我要找的。不幸的是，在我参与的项目中有太多的遗留代码，任何通过CSS进行的更改都会产生难以处理的问题。
我选择了JS。我创建了一个函数，它替换数组中的所有元素，以这样的方式排列索引，以便数组元素按列排列。
这可能不是最优雅的解决方案，但也许对某人有用。
下面是应用函数之前的代码：

.elements {
  width: 100%;
}

.element {
  width: 25%;
  box-sizing: border-box;
  border: 1px solid #000;
  text-align: center;
  margin: 10px 0;
  padding: 10px;
  float: left;
}

<div class="elements">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
  <div class="element">6</div>
  <div class="element">7</div>
  <div class="element">8</div>
  <div class="element">9</div>
</div>

下面是应用函数arrangeInColumns()后的代码：

const numberOfColumns = 4;
const elements = document.querySelectorAll('.element');

var arrangedInColumns = arrangeInColumns(elements, numberOfColumns);
var elementsContainer = document.querySelector('.elements');

elementsContainer.innerHTML = '';
for (let k = 0; k < arrangedInColumns.length; k++) {
    elementsContainer.appendChild(arrangedInColumns[k]);
}

function arrangeInColumns(elements, numberOfColumns) {
    const rows = Math.floor(elements.length / numberOfColumns);
    const extraItems = elements.length % numberOfColumns;

    const tableHeight = rows + extraItems;

    const newArrayForElements = [];

    let currentIndex = 0;

    for (let i = 0; i < tableHeight; i++) {
        const rowOffset = i;
        let valuesToAdd = 0;

        for (let j = 0; j < numberOfColumns; j++) {
            if (currentIndex === elements.length) break;

            const newIndex = rowOffset + valuesToAdd;
            newArrayForElements[currentIndex] = elements[newIndex];

            valuesToAdd += rows;
            if (extraItems > j) {
                valuesToAdd += 1;
            }

            currentIndex++;
        }
    }
    return newArrayForElements;
}

.elements {
  width: 100%;
}

.element {
  width: 25%;
  box-sizing: border-box;
  border: 1px solid #000;
  text-align: center;
  margin: 10px 0;
  padding: 10px;
  float: left;
}

<div class="elements">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
  <div class="element">6</div>
  <div class="element">7</div>
  <div class="element">8</div>
  <div class="element">9</div>
</div>

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将帮助你
for large display
for mbl screen display