使用CSS网格，如何根据网格项目的先前同级项目之一使网格项目自动流动？

问题描述

我有一个网格，在其中我将第一行的列标题和随后的每一行作为列项目。在每一列下将有动态数目的列标题和动态数目的项目（行），因此我不能使用具有硬编码值的网格模板作为行数或列数。

我正在尝试使隐式网格将项目自动按正确顺序排列。我已经正确地自动排列了列标题，但是列下面的项目没有流入正确的列中。

在我的示例中，所有1.n项都应位于“列1”之下，所有2.n项都应位于“列2”之下，而所有3.n项都应位于“列3”之下。 / p>

我当时正在考虑为每个.column-header使用前面的.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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）