如何用CSS Grid实现内容自适应行高+剩余空间填充布局？

要实现你描述的布局（奇数位元素自适应内容高度，偶数位元素填充对应剩余空间），可以通过以下CSS Grid方案解决：

假设你的HTML结构为：

<div class="container">
  <div class="item">k</div>
  <div class="item">l</div>
  <div class="item">n</div>
  <div class="item">o</div>
</div>

核心CSS代码 #

.container {
  display: grid;
  /* 重复定义"自适应行+弹性剩余行"的结构，组数根据实际元素数量调整 */
  grid-template-rows: repeat(2, min-content minmax(0, 1fr));
  height: 100vh; /* 示例容器高度，可按需调整为固定值或min-height */
  gap: 8px; /* 可选，设置元素间间距 */
}

/* 自适应内容的元素（k、n）：确保高度由内容决定 */
.container .item:nth-child(odd) {
  overflow: hidden; /* 可选，防止内容溢出时拉伸元素 */
}

/* 填充剩余空间的元素（l、o）：解决Grid中1fr元素内容溢出不收缩的问题 */
.container .item:nth-child(even) {
  min-height: 0;
  overflow: auto; /* 可选，内容过多时显示滚动条 */
}

关键说明 #

1. 行模板设计：repeat(2, min-content minmax(0, 1fr)) 让每组布局都遵循“自适应高度行+弹性剩余行”的规则，min-content 保证奇数位元素高度完全由内容撑开，minmax(0, 1fr) 让偶数位元素在容器有剩余空间时自动填满，内容过多时则随内容撑开。
2. min-height: 0：Grid中1fr元素默认有最小高度限制，添加此属性可解除限制，避免元素因内容过少出现不必要的留白。
3. 容器高度适配：如果不需要固定容器高度，可将height:100vh改为min-height:100vh，容器会根据内容自动调整高度，同时保证至少填满视口。

特殊场景处理 #

如果必须使用固定高度容器，且要求剩余行高度独立（不均分整体剩余空间），则需要通过JavaScript动态计算高度——因为CSS无法单独针对某一行的局部剩余空间分配高度，所有1fr都是基于容器整体剩余空间计算的。示例JS代码：

const container = document.querySelector('.container');
const adaptiveItems = document.querySelectorAll('.item:nth-child(odd)');
const fillItems = document.querySelectorAll('.item:nth-child(even)');

function adjustFillHeight() {
  const containerHeight = container.offsetHeight;
  let totalAdaptiveHeight = 0;
  adaptiveItems.forEach(item => totalAdaptiveHeight += item.offsetHeight);
  
  const gap = parseInt(getComputedStyle(container).gap) || 0;
  const totalGapHeight = gap * (adaptiveItems.length - 1);
  const remainingHeight = containerHeight - totalAdaptiveHeight - totalGapHeight;

  // 此处将剩余空间全部分配给第一个填充元素，可根据需求调整分配逻辑
  fillItems[0].style.height = `${remainingHeight}px`;
  fillItems.forEach((item, index) => {
    if (index > 0) item.style.height = 'auto';
  });
}

// 初始化调整
adjustFillHeight();
// 窗口大小变化时重新计算
window.addEventListener('resize', adjustFillHeight);

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