Генерация CSS Grid динамически с использованием JavaScript или PHP - PullRequest
Новая
       1

Генерация CSS Grid динамически с использованием JavaScript или PHP

2 голосов
/ 20 сентября 2019

По сути, у меня есть этот макет, он работает со статической CSS Grid, но я пытаюсь заставить его работать с любым количеством элементов.Элемент

enter image description here

<li> будет заключен в цикл while, который генерирует сообщения блога (в WordPress с использованием WP_Query).

Я хочу, чтобы сетки повторялись после каждого десятого поста.

Надеюсь, это имеет смысл.

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 Ответ

0 голосов
/ 22 сентября 2019

Если я правильно понимаю, у вас закончились селекторы nth-child.Вам понадобится формула для факторной обработки каждого 2-го элемента (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 (четный) или nth-child (нечетный).

...