如何计算CSS Grid中组件所需的网格行跨度值？

问题背景 #

我正在构建一个固定2列、行数未知的CSS Grid布局，现有代码如下：

.container {
  display: grid;
  grid-template-column: repeat(2, 1fr); /* 注：正确属性名应为grid-template-columns */
  grid-auto-rows: 12rem;
}

.component {
  grid-row: span 2; 
}

容器内要展示宽度统一为W的组件列表C[]，但每个组件的高度H(C)各不相同（由内部文本、数据长度决定）。需要为高组件计算合适的行跨度值vSpan，满足：

vSpan * 12rem >= H(C) > (vSpan - 1) * 12rem

之前尝试用Flex布局，但无法实现块元素的上下堆叠效果。

解决方案 #

要实现这个需求，需要结合JavaScript动态计算每个组件的实际高度，再设置对应的Grid行跨度：

• 转换基础行高为像素值
  先把grid-auto-rows定义的12rem转换成像素，方便后续计算：

  const container = document.querySelector('.container');
  const baseRowHeight = parseFloat(getComputedStyle(container).gridAutoRows);
  

• 遍历组件计算并设置行跨度
  对每个组件，获取其实际高度后向上取整计算vSpan，再设置grid-row样式：

  document.querySelectorAll('.component').forEach(comp => {
    const compHeight = comp.offsetHeight;
    const vSpan = Math.ceil(compHeight / baseRowHeight);
    comp.style.gridRow = `span ${vSpan}`;
  });
  

• 处理动态内容更新
  如果组件内容会动态变化（比如加载数据、文本修改），用ResizeObserver监听高度变化，自动更新行跨度：

  const resizeObserver = new ResizeObserver(entries => {
    entries.forEach(entry => {
      const comp = entry.target;
      const compHeight = entry.contentRect.height;
      const vSpan = Math.ceil(compHeight / baseRowHeight);
      comp.style.gridRow = `span ${vSpan}`;
    });
  });
  
  // 给所有组件添加监听
  document.querySelectorAll('.component').forEach(comp => {
    resizeObserver.observe(comp);
  });
  

关键注意点 #

• 修正CSS属性拼写：原代码中的grid-template-column是错误的，必须改为grid-template-columns，否则Grid布局无法正常生效
• offsetHeight会包含组件的内边距、边框高度，刚好符合我们需要的实际占用高度
• 若页面根字体大小（影响rem值）可能变化，需要在字体大小改变时重新计算baseRowHeight

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