如何给响应式动态文章网格的每行添加全屏交替背景？

我有一个全屏宽度的div容器，内部包含动态文章网格：列数随屏幕宽度自适应变化，行数由文章数量决定。需要给网格的每行添加交替的全屏背景色，但网格本身最大宽度仅为1200px，不会撑满屏幕。

当前代码 #

CSS

.container { width:100%; }
.post-grid { 
  width:100%; 
  max-width:1200px; 
  display:grid; 
  grid-template-columns:repeat(4, 1fr); 
  gap:3rem;
}

@media only screen and (max-width: 1000px) {
  .post-grid { grid-template-columns:repeat(3, 1fr); }
}

@media only screen and (max-width: 768px) {
  .post-grid { grid-template-columns:repeat(2, 1fr); }
}

@media only screen and (max-width: 480px) {
  .post-grid { grid-template-columns:repeat(1, 1fr); }
}

HTML

<div class="container">
  <div class="post-grid">
    <article class="post">post 1</article>
    <article class="post">post 2</article>
    <article class="post">post 3</article>
    <article class="post">post 4</article>    
    <article class="post">post 5</article>
    <article class="post">post 6</article>
    <article class="post">post 7</article>
    <article class="post">post 8</article>   
  </div>
</div>

已尝试方案 #

• 使用渐变背景，但容器高度随屏幕宽度变化，无法适配
• 将容器和post-grid设为全屏可实现交替背景，但文章间距过大，不符合需求
• 给单个.post设置背景，网格间隙及左右外侧无背景，达不到全屏行背景效果

目标效果 #

网格第1行白色背景，第2行灰色背景，第3行白色背景，以此类推，背景需铺满整个屏幕宽度。

方案一：固定文章高度（纯CSS实现） #

如果文章高度固定，可通过给全屏容器设置线性渐变背景，结合媒体查询确保适配不同列数：

1. 给文章设置固定高度，并添加背景色覆盖容器渐变：

.post {
  height: 200px; /* 根据实际需求调整 */
  background-color: #fff;
}

2. 给容器设置交替渐变背景，色块高度等于文章高度 + 行间距：

.container {
  width: 100%;
  /* 重复白色、灰色色块，每组高度为200px+3rem */
  background: linear-gradient(
    #fff 0 calc(200px + 3rem),
    #eee calc(200px + 3rem) calc(2*(200px + 3rem)),
    #fff calc(2*(200px + 3rem)) calc(3*(200px + 3rem)),
    #eee calc(3*(200px + 3rem)) calc(4*(200px + 3rem)),
    #fff calc(4*(200px + 3rem)) calc(5*(200px + 3rem))
  );
}

3. 确保网格居中，让两侧渐变背景铺满屏幕：

.post-grid {
  /* 保留原有样式 */
  margin: 0 auto; /* 添加居中 */
}

方案二：动态文章高度（JS+CSS实现） #

如果文章高度不固定，需通过JS动态计算每行高度，再生成对应渐变背景：

1. 保留原有CSS，添加容器基础样式：

.container {
  width: 100%;
}
.post-grid {
  width:100%;
  max-width:1200px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:3rem;
  margin: 0 auto;
}

2. 添加JS代码动态更新背景：

function updateRowBackgrounds() {
  const container = document.querySelector('.container');
  const grid = document.querySelector('.post-grid');
  if (!container || !grid) return;

  // 获取当前网格列数
  const colCount = getComputedStyle(grid).gridTemplateColumns.split(' ').length;
  const posts = Array.from(grid.querySelectorAll('.post'));
  const rowHeights = [];

  // 按列数分组，计算每行最大高度（含间距）
  for (let i = 0; i < posts.length; i += colCount) {
    const rowPosts = posts.slice(i, i + colCount);
    const maxRowHeight = Math.max(...rowPosts.map(post => post.offsetHeight));
    const gap = parseInt(getComputedStyle(grid).gap);
    rowHeights.push(maxRowHeight + gap);
  }

  // 构建渐变字符串
  let gradientStr = '';
  let currentPosition = 0;
  rowHeights.forEach((height, index) => {
    const color = index % 2 === 0 ? '#fff' : '#eee';
    gradientStr += `${color} ${currentPosition}px ${currentPosition + height}px,`;
    currentPosition += height;
  });
  gradientStr = gradientStr.slice(0, -1); // 移除末尾逗号

  container.style.background = `linear-gradient(${gradientStr})`;
}

// 初始化及窗口 resize 时更新
window.addEventListener('load', updateRowBackgrounds);
window.addEventListener('resize', updateRowBackgrounds);

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