Generate CSS Grid dynamically using JavaScript or PHP

Question

Basically I have this layout, it's working with the static CSS Grid but I'm trying to make it work with any number of items.

<li> element will be wrapped inside a 'while loop' which generates blog posts (in WordPress using WP_Query).

I want the grids to repeat after every 10th post.

Hope this makes sense.

 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

If I understand correctly you are running out of nth-child selectors. You will need a formula to factorially handle every 2nd item (2n+0) or every third item (3n+0), ect... It looks like you need to repeat every 7th block to make that grid so:

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

You might also be able to use nth-child(even) or nth-child(odd).