如何使用 CSS 网格让项目根据其原生宽度跨越多个网格列？

Question

我正在 CSS 网格中显示具有最大列数的项目列表。项目内容的大小各不相同，如果它不适合一列，我希望项目跨越多个项目，最多可达整个网格中的数量。

谷歌搜索给了我这个指南，它看起来很相似，虽然不完全是我想要的，但足够接近，可以从那里开始并进行调整。结果如下：

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;
}

<ul class="search-results-list">
  <li class="search-results-card">Short</li>
  <li class="search-results-card">Short</li>
  <li class="search-results-card">Medium Length</li>
  <li class="search-results-card">Looooooooooooooooooooooooooooong Looooooooooooooooooooooooooooong</li>
  <li class="search-results-card">Short</li>
  <li class="search-results-card">Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Long</li>
  <li class="search-results-card">A Short</li>
  <li class="search-results-card">Another Short</li>
  <li class="search-results-card">Even Longer Than Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Long</li>
  <li class="search-results-card">A Short</li>
  <li class="search-results-card">Another Short</li>
</ul>

<ul class="search-results-list desired">
  <li class="search-results-card">Short</li>
  <li class="search-results-card">Short</li>
  <li class="search-results-card">Medium Length</li>
  <li class="search-results-card col-2">Looooooooooooooooooooooooooooong Looooooooooooooooooooooooooooong</li>
  <li class="search-results-card">Short</li>
  <li class="search-results-card col-2">Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Long</li>
  <li class="search-results-card">A Short</li>
  <li class="search-results-card">Another Short</li>
  <li class="search-results-card col-3">Even Longer Than Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Looooooooooooooooooooooooooooong</li>
  <li class="search-results-card">A Short</li>
  <li class="search-results-card">Another Short</li>
</ul>

如何让顶部列表（黑色背景）看起来像底部列表（青色背景），但没有预先将 css 类分配给设置

grid-column: span

值时要使用的特定项目 - 我需要单独进行该分配基于项目内容，我只需要使用 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 应该产生一个整数，这个语句总是为有问题的项目分配 1 列，无论 %SOMEVALUE% 是什么

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

Answer 1

您是否考虑过使用 float:left 而不是 grid 来实现此目的？似乎您想添加随机项目并让它们落入其中，而不改变元素的自然宽度。除了可能将它们的每个宽度四舍五入到最接近的第 n 列宽度之外，如果您希望它们按它们可能的方式落入，那么我建议将它们浮动。我在向右浮动和向左浮动时得到了很好的结果。使调整大小看起来很酷。只是一个想法。