WordPress cycle?

Question

WordPress

Good afternoon. Need advice. Here is an example of the location of the blocks. I do not quite understand how to display this in the WP cycle? The first element is different from the rest, plus each line has its own wrapper. If done through a loop, then all blocks are added to one .row. Plus, it's not entirely clear how to make the first element different from the others.
https://codepen.io/brezze/pen/xWrmNy

Answer 1

start a counter in the loop over the elements, increase its value at each iteration. As soon as the counter number is divisible by 3 without a remainder, you will need to close div.row and open a new one. Using the same counter, you can determine that the element is the first in the line: if the number-counter-1 is divisible by 3 without a remainder, then this is the first element

Answer 2

<div class="row">
<?php
$i     = 0;
$items = [ 1, 2, 3, 4, 5, 6 ];
foreach ( $items as $item ) :
  ?>
  <div class="item<?php echo( $i === 0 ? ' item--red' : null ); ?>">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <?php
  $i = $i === 2 ? 0 : $i ++;
endforeach;
?>
</div>

row is not necessary to shove, you can do it through grid. although you can again dance from $ i and stick conditions

.row {
display: grid;
grid-template-columns: repeat(3, 40% 30% 30%);