Combining php loop and count - Wordpress ACF - php

Question

I wondered if anyone could help me combine two blocks of code I have. I have one block looping though items and the start of another block showing a count and hopefully enabling me to display the items looping through in rows by adding a div around them every two items... Heres the first bit of code, the loop:
<?php if(get_field('areas')): ?>
<?php while(has_sub_field('areas')): ?>
<div class="single-area-item six columns">
<p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
<h4> <?php the_sub_field('area_title'); ?> </h4>
<p> <?php the_sub_field('area_info'); ?> <p>
</div>
<?php endwhile; ?>
<?php endif; ?>
I'm using Advance Custom Fields for Wordpress and this is pulling through repeater fields... this displays them just one after the other.
Here's the code I have found to hopefully display them in rows.
<?php
$num = 1;
foreach ( $terms as $term ) {
if($num%2) {
echo '<div class="area-row">';
}
// Other Code
if($num %2) {
echo '</div>';
}
$num++
}
?>
I would like to display them in rows of two...
ONE TWO
THREE FOUR
FIVE SIX
Etc...
So, Im guessing I need to combine the code somehow... I currently have this: but it doesn't seem to work:
<?php
$num = 1;
foreach ( $terms as $term ) {
if($num%2) {
echo '<div class="area-row">';
}
if(get_field('areas')): ?>
<?php while(has_sub_field('areas')): ?>
<div class="single-area-item six columns">
<p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
<h4> <?php the_sub_field('area_title'); ?> </h4>
<p> <?php the_sub_field('area_info'); ?> <p>
</div>
<?php endwhile; ?>
<?php endif; ?>
if($num %2) {
echo '</div>';
}
$num++
}
?>

Answer 1

Okay so it looks like there was a couple of simple issues with this, you had closed the php tag after your if statment and then continued to write php without reopening the php tags. Also there is a slight logic error with the if($num%2) statements as one of these needs to be if, the other needs to be if not, so that the alternate.
Give this code a try and let me know how you get on:
<?php
if(get_field('areas')):
$num = 1;
?>
<?php while(has_sub_field('areas')):
if($num%2) {
echo '<div class="area-row">';
} ?>
<div class="single-area-item six columns">
<p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
<h4> <?php the_sub_field('area_title'); ?> </h4>
<p> <?php the_sub_field('area_info'); ?> <p>
</div>
<?php
if(!$num%2) {
echo '</div>';
}
$num++
endwhile; ?>
<?php endif; ?>

Answer 2

The main reason behind this question was for me to be able to target the third item of the looped through items, as it had padding on it that was breaking the rows that I needed to remove.
I have since found another solution that seems to be working.
By using the nth-child element, I have been able to target and remove the padding on every third item that's looped through - fixing the issue.
.single-area-item:nth-child(3n+3) {
margin-left: 0;
}
This is for rows or 2 items, if it were rows of 3 or 4 then it would need to target every 4th or 5th item respectively.