How to organize wordpress posts query in wrong grid?

Question

WordPress

Good day, the site does not need the correct grid, I made it up, but I don’t understand how to organize the output of posts there, how to organize a taco cycle, because there is more than one block in such a grid. Please tell me with an example. Thank you.

Answer 1

Hello!
This question has been asked here many times. I recommend looking for answers.
And so I will answer in general terms - you can implement it in different ways:
1) on the client side using js or css.
2) on the server using php using
css means applying styles to such pseudo-classes as: Using nth-child
php is implemented in the following way. In the record output loop, you get the record index or start a counter. And for every n-th element, you apply one or another css class.
Here's to get the index of a post inside a loop
https://stackoverflow.com/questions/19303556/wordp...
$wp_query->post_count
And here's the counter:

<?php 
 $count = 0; //set up counter variable
 while (have_posts()) : the_post(); 
 $count++; //increment the variable by 1 each time the loop executes
 // here put the code for normal posts
 endwhile;
 ?>

By means of js, almost the same as in PHP. Just count the posts already on the client side and add the required class.

Answer 2

That's why you need to make the design universal and not nailed, bad layout...
The sizes and styles of the blocks need to be written in css and not distorted by classes with different names.
If nothing is changed, then you will have to start the $i counter and dance with Ifas, for example, like this

$num = 1; //Число

if($num % 2 === 0)
  echo 'Четное';
elseif
  echo 'Нечетное';

and similar dances ...
As for me, it’s easier to redo the design so that the blocks go in order

<div class="main">
    <div class="item">
        <img src="image1.jpg">
        <p>Text</p>
    </div>
    <div class="item">
        <img src="image1.jpg">
        <p>Text</p>
    </div>
    <div class="item">
        <img src="image1.jpg">
        <p>Text</p>
    </div>    
</div>

and in css already use all sorts of :nth-child things like this:

.item:nth-child((3n+0)){
//тут стили что бы блок был нужной формы
}

.item:nth-child((1n+0)){
//тут стили что бы блок был нужной формы
}

.item:nth-child((2)){
//тут стили что бы блок был нужной формы
}