我不认为目前有一个内置的方式使用CSS网格布局布局的项目的方式，你在第一张照片。
您应该按照希望显示的顺序手动排列项目（必要时插入填充单元格/项目），用2个弹性框替换网格，或者您可以创建一个自定义元素，描述您希望如何使用JavaScript排列项目。
下面是实现所需功能的自定义元素的示例：

class CardGrid extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({
      mode: "open"
    });
    this.shadowRoot.innerHTML = /*html*/ `<slot id="slot"></slot>`;
  }

  #createRow() {
    const div = document.createElement("div");
    div.style = "display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin-bottom: 5px;";
    return div;
  }

  connectedCallback() {
    const slot = this.shadowRoot.querySelector("#slot");

    // listen for when children are added/modified
    slot.addEventListener("slotchange", () => {
      const children = slot.assignedElements();

      const row1 = this.#createRow();
      const row2 = this.#createRow();

      const firstRowEndIndex = Math.ceil(children.length / 2);
      const firstRowChildren = children.slice(0, firstRowEndIndex);
      const secondRowChildren = children.slice(firstRowEndIndex);
      if (firstRowChildren > secondRowChildren) {
        // add padding cell
        const paddingCell = document.createElement("div");
        secondRowChildren.unshift(paddingCell)
      }

      const wrapper = document.createElement("div");
      wrapper.style.display = "inline-block";
      row1.append(...firstRowChildren);
      row2.append(...secondRowChildren);
      wrapper.append(row1, row2);
      this.append(wrapper);
    }, {
      once: true
    });
  }
}

customElements.define("card-grid", CardGrid)

.box {
  width: 60px;
  height: 40px;
  background-color: var(--color);
}

.r {
  --color: red
}

.o {
  --color: orange
}

.y {
  --color: yellow
}

.g {
  --color: green
}

.b {
  --color: blue
}

.i {
  --color: indigo
}

.v {
  --color: violet
}

<card-grid>
  <div class="box r"></div>
  <div class="box o"></div>
  <div class="box y"></div>
  <div class="box g"></div>
  <div class="box b"></div>
  <div class="box i"></div>
  <div class="box v"></div>
  <div class="box r"></div>
  <div class="box o"></div>
  <div class="box y"></div>
  <div class="box g"></div>
</card-grid>