使用 JavaScript 或 PHP 动态生成 CSS 网格

Question

基本上我有这个布局，它与静态 CSS 网格一起使用，但我试图让它与任意数量的项目一起使用。

<li> 元素将被包裹在一个“while 循环”中，该循环会生成博客文章（在 WordPress 中使用 WP_Query）。

我希望网格在每 10 个帖子后重复一次。

希望这是有道理的。

var firstPost = document.querySelectorAll('li:nth-of-type(10n+1)');
    for (var i = 0 ; i < firstPost.length ; i++ ) {
        var getID = firstPost[i].id;
        //console.log(getID);
       firstPost[i].style.color = "red";
       //console.log(firstPost[i]);
    }

ul.posts {
  display: grid;
  padding-left: 0px;
  grid-template-rows: repeat(auto, 1fr);
  grid-template-columns: repeat(12, 1fr);
  justify-content: between;
  grid-gap: 10px;
}
ul.posts li .featured-image {
  background-image: url("https://placeimg.com/1000/600/any");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 400px;
}
ul.posts li {
  list-style-type: none;
}
ul.posts li:nth-child(1) {
  grid-area: "g1";
  grid-row: 1/2;
  grid-column: 1/13;
}
ul.posts li:nth-child(2) {
  grid-area: "g2";
  grid-row: 2/3;
  grid-column: 1/7;
}
ul.posts li:nth-child(3) {
  grid-area: "g3";
  grid-row: 2/3;
  grid-column: 7/13;
}
ul.posts li:nth-child(4) {
  grid-row: 3/4;
  grid-column: 1/5;
}
ul.posts li:nth-child(5) {
  grid-row: 3/4;
  grid-column: 5/9;
}
ul.posts li:nth-child(6) {
  grid-row: 3/4;
  grid-column: 9/13;
}
ul.posts li:nth-child(7) {
  grid-row: 4/5;
  grid-column: 1/7;
  display: flex;
  align-items: center;
}
ul.posts li:nth-child(7) div:nth-child(1) {
  flex: 1;
}
ul.posts li:nth-child(7) div:nth-child(2) {
  flex: 1;
  padding-left: 20px;
}
ul.posts li:nth-child(8) {
  grid-row: 5/6;
  grid-column: 1/7;
  display: flex;
  align-items: center;
}
ul.posts li:nth-child(8) div:nth-child(1) {
  flex: 1;
  order: 2;
}
ul.posts li:nth-child(8) div:nth-child(2) {
  flex: 1;
  order: 1;
}
ul.posts li:nth-child(9) {
  grid-row: 4/6;
  grid-column: 7/13;
  position: relative;
}
ul.posts li:nth-child(9) .featured-image {
  height: 730px;
}
ul.posts li:nth-child(9) .description {
  position: absolute;
  bottom: 0px;
  left: 10px;
}
ul.posts li:nth-child(9) .description p {
  margin-bottom: 0px;
}
ul.posts li:nth-child(10) {
  grid-row: 6/7;
  grid-column: 1/13;
}
ul.posts li:nth-child(11) {
  grid-row: 7/8;
  grid-column: 1/13;
}
ul.posts img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  padding-bottom: 10px;
}

@media screen and (max-width: 991px) {
  ul.posts {
    display: block;
  }
  ul.posts li .featured-image {
    height: 200px;
  }
  ul.posts li:nth-child(9) .featured-image {
    height: 200px;
  }
  ul.posts li:nth-child(9) .description {
    position: relative;
  }
  ul.posts li:nth-child(9) .description p {
    margin-bottom: 10px;
  }
}

<ul class="posts">
    <li>
      <div class="featured-image"></div>
      <div class="description">
        <h2>Title 1</h2>
        <p>Description</p>
      </div>
    </li>
    <li>
      <div class="featured-image"></div>
      <div class="description">
        <h2>Title 2</h2>
        <p>Description</p>
      </div>
    </li>
    <li>
      <div class="featured-image"></div>
      <div class="description">
        <h2>Title 3</h2>
        <p>Description</p>
      </div>
    </li>
    <li>
        <div class="featured-image"></div>
      <div class="description">
        <h2>Title 4</h2>
        <p>Description</p>
      </div>
    </li>
    <li>
      <div class="featured-image"></div>
      <div class="description">
        <h2>Title 5</h2>
        <p>Description</p>
      </div>
    </li>
    <li>
      <div class="featured-image"></div>
      <div class="description">
        <h2>Title 6</h2>
        <p>Description</p>
      </div>
    </li>
    <li>
      <div class="featured-image"></div>
      <div class="description">
        <h2>Title 7</h2>
        <p>Description</p>
      </div>
    </li>
    <li>
      <div class="featured-image"></div>
      <div class="description">
        <h2>Title 8</h2>
        <p>Description</p>
      </div>
    </li>
      <li>
      <div class="featured-image"></div>
      <div class="description">
        <h2>Title 9</h2>
        <p>Description</p>
      </div>
    </li>
    <li>
      <div class="featured-image"></div>
      <div class="description">
        <h2>Title 10</h2>
        <p>Description</p>
      </div>
    </li>
    <li>
      <div class="featured-image"></div>
      <div class="description">
        <h2>Title 11</h2>
        <p>Description</p>
      </div>
    </li>
  </ul>

Answer 1

如果我理解正确，您将用完第 n 个子选择器。 您将需要一个公式来分解处理每第二项 (2n+0) 或每第三项 (3n+0) 等... 看起来您需要每隔 7 个块重复一次以制作该网格：

    ul.posts li:nth-child(7n+0) {
      grid-area: "g1";
      grid-row: 1/2;
      grid-column: 1/13;
    }

您还可以使用 nth-child(even) 或 nth-child(odd)。