CSS网格：自动适应垂直跨度

Question

我有一个 24 列的网格，外边距为 1vw，间隙为 1vw。这是：

100vw - 1vw * 2 边距 - 1vw * 23 间隔 = 75vw。 75vw / 24 = 3.125vw 对于每个方格。

现在我有两个元素。我希望他们处于中心位置，grid-column: 10 / span 4;。 我希望他们自动采取必要的块，但找不到路。

      body {
        margin: 0;
        padding: 0;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(24, 3.125vw);
        margin: 1vw;
        padding: 0;
        grid-auto-rows: 3.125vw;
        gap: 1vw;
      }

      .main {
        grid-column: 10 / span 4;
        border: 2px solid;
      }

      .sub1 {
        grid-column: 10 / span 4;
        border: 2px solid;
      }

    <div class="grid">
      <div class="main">
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
      </div>
      <div class="sub1">
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
      </div>
    </div>

例如，如果我强制他们使用grid-row: 1 / span 5 占用行块，它当然会起作用。但我不能这样做，因为我事先不知道物品的高度。

有什么办法可以用我的网格解决这个问题吗？

谢谢！

Answer 1

我认为仅使用 CSS 是不可能的，不久前有一个类似的问题，但我认为没有任何令人满意的答案/或任何答案，在寻找了很多之后我没有'除了将来可能可用之外，找不到其他任何东西。在这里，我发现了这个CSS Box Alignment Module Level 3，关于在网格中对齐。看看它是否与您的问题相关。