css-grid - 使用 CSS Grid，我怎样才能使网格项根据其前面的同级项之一自动流动？

Question

我有一个网格，我在其中制作第一行列标题，并在每个后续行中制作列项。每列下会有动态数量的列标题和动态数量的项目（行），所以我不能使用带有硬编码值的网格模板来表示行数或列数。

我正在尝试使隐式网格将项目自动排列成正确的顺序。我的列标题正确自动流动，但列下方的项目没有流入正确的列。

在我的示例中，所有 1.n 项应位于“Column 1”下方，所有 2.n 项应位于“Column 2”下方，所有 3.n 项应位于“Column 3”下方。

.column-header我在考虑可能对 each使用前面的内容.column-item，但我不知道该怎么做。我什至不确定这是否是最好的方法。

main {
    display: grid;
    grid-auto-flow: row;
}

main > div{
    width: 145px;
    height: 90px;
}

.column-header {
    grid-row-start: 1;
    background-color: rgb(247, 244, 244);
    border: 1px solid grey;
    align-items:center;
    padding-left: 10px;
    font-weight: bold;
}

.column-item {
    padding: 5px;
    border: 1px solid grey;
}

<main>
    <div class="column-header">Column 1</div>
    <div class="column-item">1.1</div>
    <div class="column-item">1.2</div>
    <div class="column-item">1.3</div>
    <div class="column-item">1.4</div>
    <div class="column-header">Column 2</div>
    <div class="column-item">2.1</div>
    <div class="column-item">2.2</div>
    <div class="column-item">2.3</div>
    <div class="column-item">2.4</div>
    <div class="column-item">2.5</div>
    <div class="column-item">2.6</div>
    <div class="column-item">2.7</div>
    <div class="column-header">Column 3</div>
    <div class="column-item">3.1</div>
    <div class="column-item">3.2</div>
</main>

标签： css-grid