我在一个css网格中显示了一个项目列表，它有最大的列数，项目的内容大小不同，如果它不适合一列，我希望项目跨越多个列，直到整个网格中的数量。
谷歌给了我this guide，这看起来很相似，虽然不完全是我要找的，但足够接近，从那里开始，并作出调整.结果如下：

body {
  font-family: system-ui;
  background: #111;
  color: black;
  text-align: center;
}

.search-results-list {
  list-style: none;
    padding: 0;
    
    --grid-column-count: 4;
    --grid-item--min-width: 320px;
    --grid-layout-gap: 10px;
    
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width))/ var(--grid-column-count));
  
  --grid-actual-columns: min(round(down, calc(100% / var(--grid-item--min-width))), var(--grid-column-count));
    
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);
  grid-auto-flow: dense;
}

.search-results-list li {
    display: inline-block;
}

.search-results-card {
    margin: 10px;
    min-width: 100px;
    background: #E0F2F1;
    border-radius: 5px;
    font-size: 1.4em;
    padding: 0 5px;
    
  grid-column: span round(down, calc(max-content / calc(100% / var(--grid-actual-columns))));
}

.desired {
  background-color: cyan;
}

.col-2 {
  grid-column: span 2;
  background: lime;
}

.col-3 {
  background: tomato;
  grid-column: span 3;
}

个字符
我如何让顶部列表（黑色背景）看起来像底部列表（青色背景），但在设置grid-column: span值时没有预先分配css类给要使用的特定项目-我需要仅基于项目内容进行分配，并且我只需要使用HTML和CSS（没有JavaScript）。
这是可能的吗？我在这个设置的实验过程中发现了几个问题：

• 网格中的项不知道网格列的数量，也不能计算它们，因为确定（repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));行）的CSS计算本身不是一个数字，在grid-template-columns指令之外是无用的。
• grid-column: span round(%SOMEVALUE%);是一个无效的指令--尽管round应该产生一个整数，但无论%SOMEVALUE%是什么，该语句始终将1列分配给相关项

那么，我该如何进行这种动态列号分配呢？