使用帖子网格向显示网格中的每一行添加交替背景

Question

我有一个全宽 div，其中包含动态帖子网格。列数取决于屏幕宽度，行数取决于帖子数量。

我希望每行都有一个交替的背景颜色（全宽），即使帖子网格本身不会拉伸到全宽（而不是像 1200px 那样）。

由于网格本身不是 100% 屏幕宽度并且行没有换行，因此我没有找到添加这些交替背景颜色的方法。

我想过使用 jQuery 设置渐变（白色/灰色/白色/灰色/等）背景，具体取决于容器 div 的高度，但由于该高度也会根据屏幕宽度而变化，因此这不是解决方案.

有人知道如何在这种动态情况下获得每行交替背景吗？

这里有一些示例代码来描述我正在使用的内容：

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

<style>
.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); }
}
</style>

目标： 网格后第 1 行：白色背景 网格后第 2 行：灰色背景 网格后第 3 行：白色背景 网格后第 4 行：灰色背景 等等

尝试过的解决方案：

• 尝试过渐变背景。但由于容器高度根据屏幕宽度而变化，这是不可能的。
• 当容器+后网格div全宽时管理交替背景。但帖子之间的距离太远了。我需要网格内的帖子总共占用不超过 1200 像素的宽度。
• 每篇文章/帖子的背景设置。但这会留下中间以及左右外侧的间隙，而没有背景。

Answer 1

由于您已经在使用媒体查询，因此您可以使用它们通过 nth-child 规则设置元素的样式：

.container {
  width: 100%;
}

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

.post:nth-child(8n+1), .post:nth-child(8n+2), .post:nth-child(8n+3), .post:nth-child(8n+4) {
  background-color: lightgray;
  box-shadow: 60px 0px 0px 0px lightgray;
}


@media only screen and (max-width: 1000px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .post:nth-child(n) {
      background-color: white;
      box-shadow: none;
  }
  .post:nth-child(6n+1), .post:nth-child(6n+2), .post:nth-child(6n+3) {
      background-color: lightblue;
      box-shadow: 60px 0px 0px 0px lightblue;
  }
}

@media only screen and (max-width: 768px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .post:nth-child(n) {
      background-color: white;
      box-shadow: none;
  }
  .post:nth-child(4n+1), .post:nth-child(4n+2) {
      background-color: lightgreen;
      box-shadow: 60px 0px 0px 0px lightgreen;
  }
}

@media only screen and (max-width: 480px) {
  .post-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .post:nth-child(n) {
      background-color: white;
      box-shadow: none;
  }
  .post:nth-child(2n+1) {
      background-color: orange;
      box-shadow: 60px 0px 0px 0px orange;
  }
  
}

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