How can I output an elements inside a foreach by generating a column layout?

I’ve a problem I need to solve. I’ve this HTML layout here in PHP:

<div class="container">
    <div class="wrapper">
        <span class="entry"></span>
        <span class="entry"></span>
    </div>
    <div class="wrapper">
        <span class="entry"></span>
        <span class="entry"></span>
    </div>
    <div class="wrapper">
        <span class="entry"></span>
        <span class="entry"></span>
    </div>
    <div class="wrapper">
        <span class="entry"></span>
        <span class="entry"></span>
    </div>
</div>

I have a column layout here. This means that I always want to pack 2 elements into a wrapper class. I get all my elements from an array, which I want to output with a loop. I had the idea to output the wrapper only every 2nd pass, but this results in the following output:

<div class="wrapper">
    <div class="wrapper">
        <span class="entry"></span>
    </div>
    <span class="entry"></span>
    <div class="wrapper">
        <span class="entry"></span>
    </div>
    <span class="entry"></span>
    <div class="wrapper">
        <span class="entry"></span>
    </div>
    <span class="entry"></span>
    <div class="wrapper">
        <span class="entry"></span>
    </div>
    <span class="entry"></span>
</div>

That’s my code:

<div class="container">
    <?php
    $loop_count = 0;
    foreach ( $array as $item ) {
        if ( $loop_count % 2 === 0 ) { ?>
            <div class="wrapper">
        <?php } ?>
        <span class="entry"><?= $item ?></span>
        <?php if ( $loop_count % 2 === 0 ) { ?>
            </div>
        <?php }
        $loop_count++;
    } ?>
</div>

My expected output in an image:

Answer

Your code will be a little complicated:

<?php
$array = [1,2,3];?>
<div class="container">
    <?php
    $loop_count = 0;
    foreach ( $array as $item ) {
        // here you open `div.wrapper`
        if ( $loop_count % 2 === 0 ) { ?>
            <div class="wrapper">
        <?php } ?>
        <span class="entry"><?= $item ?></span>
        <?php 
        // here you close `div.wrapper`
        if ( $loop_count % 2 === 1 ) { ?>
            </div>
        <?php }
        $loop_count++;
    }
    // here you close `div.wrapper` if you have odd count of elements
    if ( $loop_count % 2 === 1 ) { ?>
        </div>
    <?php }?>
</div>

Less complicated solution is to split your array in chunks of size 2:

<?php

$array = [1,2,3,4];
$chunks = array_chunk($array, 2);
?>
<div class="container">
    <?php
    foreach ( $chunks as $chunk ) {?>
        <div class="wrapper">
            <span class="entry"><?= $chunk[0] ?></span>
            <!-- Here you can check if second element exists -->
            <span class="entry"><?= $chunk[1] ?></span>
        </div>
    <?php }?>
</div>

Advertisement

Answer