如何在CSS Grid中动态统一不同高度内容的单元格高度？

针对你创建垂直单列列表时遇到的单元格高度动态匹配问题，结合你提出的三个条件，这里提供一套可行的解决思路：

核心思路 #

通过CSS Flexbox 布局基础 + JavaScript 动态计算高度实现，既能满足宽度变化时的高度自适应，又能保证内容不拉伸、列表可滚动。

实现代码 #

CSS 部分

.grid {
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 可根据需求调整项间距 */
  padding: 16px; /* 可选，增加内边距优化视觉 */
  box-sizing: border-box;
}

.item {
  align-self: flex-start; /* 内容顶部对齐，避免拉伸 */
  width: 100%; /* 占满列宽 */
  box-sizing: border-box;
  border: 1px solid #eee; /* 可选，方便查看单元格范围 */
  padding: 8px;
}

JavaScript 部分

// 同步所有列表项高度的函数
function syncItemHeights() {
  const grid = document.querySelector('.grid');
  const items = grid.querySelectorAll('.item');
  if (!items.length) return;

  // 先重置高度，确保计算基于原始内容高度
  items.forEach(item => item.style.height = 'auto');

  // 找出最高的列表项高度
  const maxHeight = Math.max(...Array.from(items).map(item => item.offsetHeight));

  // 统一设置所有项的高度
  items.forEach(item => item.style.height = `${maxHeight}px`);
}

// 页面加载完成后初始化
window.addEventListener('load', syncItemHeights);

// 窗口大小变化（包括宽度调整）时重新计算
window.addEventListener('resize', syncItemHeights);

// 如果列表项是动态添加/删除的，操作后调用 syncItemHeights() 即可

满足条件说明 #

1. 不拉伸+顶部排列：通过 align-self: flex-start 让内容保持顶部对齐，仅单元格高度匹配最高项，内容本身不会被拉伸；列表项数量较少时，所有项会自然排列在容器顶部，剩余空间留空。
2. 内容超屏可滚动：容器设置 height: 100vh 和 overflow-y: auto，当列表总高度超过视口时自动出现滚动条。
3. 动态匹配最高高度：JavaScript 会实时计算当前所有列表项的最高高度并统一设置，宽度变化触发 resize 事件时会重新计算，避免布局错乱。

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