如何仅用HTML/CSS实现CSS Grid元素根据内容宽度自动跨列？

原代码问题分析 #

1. 实际列数计算无效：--grid-actual-columns中使用round(down, calc(100% / var(--grid-item--min-width)))的方式不合法，CSS中round函数无法直接处理长度比值，且计算结果为长度值（如25%）而非整数，导致后续跨列计算失效。
2. 跨列语句无效：grid-column: span round(down, calc(max-content / ...))无法生效，因为max-content是CSS关键字，不能参与数值除法运算，且span要求必须跟整数，动态计算的非整数值不被识别。

可行方案 #

方案1：纯CSS近似实现（基于容器宽度阈值）

该方案通过容器查询，根据网格容器的宽度阈值设置元素跨列数，是纯CSS下最接近需求的近似方案：

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

.search-results-list {
  list-style: none;
  padding: 0;
  
  --max-cols: 4;
  --min-col-width: 320px;
  --gap: 10px;
  
  /* 计算单列最大可用宽度 */
  --col-width: calc((100% - (var(--max-cols) - 1) * var(--gap)) / var(--max-cols));
  /* 计算当前视口下的实际列数 */
  --actual-cols: min(var(--max-cols), max(1, floor(calc(100% / (var(--min-col-width) + var(--gap))))));
  
  display: grid;
  grid-template-columns: repeat(var(--actual-cols), minmax(var(--min-col-width), 1fr));
  gap: var(--gap);
  grid-auto-flow: dense;
  /* 开启容器查询上下文 */
  container-type: inline-size;
}

.search-results-card {
  margin: 10px;
  min-width: 100px;
  background: #E0F2F1;
  border-radius: 5px;
  font-size: 1.4em;
  padding: 0 5px;
  /* 默认占1列 */
  grid-column: span 1;
  width: max-content;
  min-width: var(--min-col-width);
}

/* 容器宽度足够容纳2列内容时，元素跨2列 */
@container (min-width: calc(2 * var(--col-width) + var(--gap))) {
  .search-results-card {
    grid-column: span 2;
  }
}

/* 容器宽度足够容纳3列内容时，元素跨3列 */
@container (min-width: calc(3 * var(--col-width) + 2 * var(--gap))) {
  .search-results-card {
    grid-column: span 3;
  }
}

/* 容器宽度足够容纳4列内容时，元素跨4列 */
@container (min-width: calc(4 * var(--col-width) + 3 * var(--gap))) {
  .search-results-card {
    grid-column: span 4;
  }
}

.desired {
  background-color: cyan;
}

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

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

方案2：JavaScript精确实现（完全符合需求）

如果允许使用JavaScript，可以精确计算每个元素的内容宽度，动态设置跨列数：

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

<script>
// 计算并设置跨列数
function setGridSpan() {
  document.querySelectorAll('.search-results-card').forEach(card => {
    const grid = card.closest('.search-results-list');
    const gap = parseInt(getComputedStyle(grid).gap);
    const maxCols = parseInt(getComputedStyle(grid).getPropertyValue('--max-cols'));
    const colWidth = (grid.offsetWidth - (maxCols - 1) * gap) / maxCols;
    const cardWidth = card.scrollWidth;
    // 计算需要跨的列数，不超过最大列数
    const span = Math.min(maxCols, Math.ceil(cardWidth / colWidth));
    card.style.gridColumn = `span ${span}`;
  });
}

// 初始化执行
setGridSpan();
// 窗口 resize 时重新计算
window.addEventListener('resize', setGridSpan);
</script>

说明 #

纯CSS目前无法直接获取元素的内容宽度并动态计算grid-column的跨度值，因此完全自动的精确效果需要JavaScript辅助。纯CSS方案是基于容器宽度的近似实现，无法完全匹配内容长度的变化。

内容的提问来源于stack exchange，提问作者executor21