Get 2 elements per loop from N lengh array - php

Question

I have seen similar questions but I feel mine is different, I have a 2 column page which needs 2 users per row, issue is when I have an array that has an odd length, the last element does not come out here is my logic
<?php for($i = 0; $i < count($team); $i++){
echo "Looping ".$i;
?>
<div class="row">
<?php for($z = $i; $z < 2; $z++){
echo "inner Looping ".$z?>
<div class="col s12 m6 grid">
<figure class="effect-honey">
<img src="<?php echo $team[$z]['image']; ?>" alt="<?php echo $team[$z]['fname']. ' '.$team[$z]['lname']; ?>"/>
<figcaption>
<h2><?php echo $team[$z]['fname']; ?><span><?php echo $team[$z]['lname']; ?></span> <i><?php echo $team[$z]['position']; ?></i></h2>
</figcaption>
</figure>
</div>
<?php $i = $z;} ?>
</div>
<?php } ?>
</div>
A sample of the output of an array with 3 items

Answer 1

Use array_chunk() on $team with 2 as the chunk size parameter. Then you can use an outer foreach() to iterate the generated pairs and an inner foreach() to display the subarrays.
Assuming you don't need to write empty html elements for the missing 2nd element in odd-count scenarios, here is an implementation (there are a few ways to do this).
Code (Demo)
$team = [
['image' => 'A.jpg', 'fname' => 'B', 'lname' => 'C', 'position' => 'D'],
['image' => 'E.jpg', 'fname' => 'F', 'lname' => 'G', 'position' => 'H'],
['image' => 'I.jpg', 'fname' => 'J', 'lname' => 'K', 'position' => 'L']
];
$pairs = array_chunk($team, 2);
foreach ($pairs as $pair) {
echo "<div class=\"row\">";
foreach ($pair as $player) {
echo "<div class=\"col s12 m6 grid\">";
echo "<figure class=\"effect-honey\">";
echo "<img src=\"{$player['image']}\" alt=\"{$player['fname']} {$player['lname']}\"/>";
echo "<figcaption>";
echo "<h2>{$player['fname']}<span>{$player['lname']}</span> <i>{$player['position']}</i></h2>";
echo "</figcaption>";
echo "</figure>";
echo "</div>";
}
echo "</div>";
}
Output:
<div class="row">
<div class="col s12 m6 grid">
<figure class="effect-honey">
<img src="A.jpg" alt="B C"/>
<figcaption>
<h2>B<span>C</span> <i>D</i></h2>
</figcaption>
</figure>
</div>
<div class="col s12 m6 grid">
<figure class="effect-honey">
<img src="E.jpg" alt="F G"/>
<figcaption>
<h2>F<span>G</span> <i>H</i></h2>
</figcaption>
</figure>
</div>
</div>
<div class="row">
<div class="col s12 m6 grid">
<figure class="effect-honey">
<img src="I.jpg" alt="J K"/>
<figcaption>
<h2>J<span>K</span> <i>L</i></h2>
</figcaption>
</figure>
</div>
</div>
If you require an empty (space-holding) portion of html when the "right-side" player is missing, please clarify your question / desired result.