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

Posted 2023-03-06

【中文标题】使用 JavaScript 或 PHP 动态生成 CSS 网格

【英文标题】：Generate CSS Grid dynamically using JavaScript or PHP

【发布时间】：2020-01-21 01:00:12

【问题描述】：

基本上我有这个布局，它与静态 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>

【问题讨论】：

你遇到了什么问题？

【参考方案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)。