Displaying each two array items in one loop item with right placement - php

Question

I am trying to do something fit with the design, so i have to show 2 item in 1 loop. Also, according to this design, should be line break in each 4 loop. Line breaks applying automatically, but its fixed 4. So, in 4 loop it shows actually 8 items. However, the point I'm stuck on is; items are not displaying in the placement I want. You can see the placement I want to do with more detail in the picture.
Red Numbers = Current placement
Green Numbers = Placement it should be
Yellow boxes = For loop items ( 8 items )
Black boxes = Items in array (16 items )
.
ul,li {
padding:0;
margin:0;
list-style:none;
}
li {
width:30px;
}
.gen {
width: 140px
}
li {
display: inline-block;
}
.ic {
width: 100%
}
<ul class="gen">
<li>
<ul>
<li class="ic">a</li>
<li class="ic">b</li>
</ul>
</li>
<li>
<ul>
<li class="ic">c</li>
<li class="ic">d</li>
</ul>
</li>
<li>
<ul>
<li class="ic">e</li>
<li class="ic">f</li>
</ul>
</li>
<li>
<ul>
<li class="ic">g</li>
<li class="ic">h</li>
</ul>
</li>
<li>
<ul>
<li class="ic">i</li>
<li class="ic">j</li>
</ul>
</li>
<li>
<ul>
<li class="ic">k</li>
<li class="ic">l</li>
</ul>
</li>
<li>
<ul>
<li class="ic">m</li>
<li class="ic">n</li>
</ul>
</li>
<li>
<ul>
<li class="ic">o</li>
<li class="ic">p</li>
</ul>
</li>
</ul>
As you can see, items are not placing alphabetically from left to right.
Here is the loop i used :
// 16 items
$items = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p');
$half = count($items) / 2;
$k = 0;
echo '<ul class="gen">';
for($i = 0; $i<$half; $i++) {
echo '<li>';
echo '<ul>';
echo '<li class="ic">'.$items[$k].'</li>';
echo '<li class="ic">'.$items[$k+1].'</li>';
echo '</ul>';
echo '</li>';
$k = $k+2;
}
echo '</ul>';

Answer 1

I hope this helps. You can run this code and see the output.
// chaganged the array to match your picture.
$items = array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16');
//used to format the output
echo "<pre>";
for ( $i = 0; $i<count($items) ; $i++ ) {
echo "loop start \n";
// access 1st item
echo $items[$i]."\n";
// based on your example, it seems that you need the item that is 4 places after the first item of the loop
echo $items[$i+4]."\n";
echo "loop end\n";
// we can use mod to check if we have reached the 4th element (index 3), we use $i+1 to check the second element of the loop
if ( ( $i+1 )%4 == 0 ) {
echo "\n---new line---\n";
$i = $i + 4;
}
echo "\n";
}
echo "</pre>";

Answer 2

Assuming that you will take care of the formatting, your code could be changed to this:
$items = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p');
for($first = 0; $first < count($items); $first += 8) {
for($add = 0; $add < 4; $add++) {
echo $items[$first + $add]; //first item
echo $items[$first + $add + 4]; //second item
}
}

Answer 3

May I see your HTML code? Here's a suggestion, display your results like this (run code snippet and use my css and php loop);
#wrapper{
background-color:rgba(0,0,0,0.6);
padding:10px;
}
.result{
display:inline-block;
padding:7px;
border:3px solid #FEBF01;
width:120px;
}
.result-child{
display:block;
padding:10px 10px;
background-color:rgba(0,0,0,0.8);
color:rgba(50,255,100,1);
font-size:2em;
text-align:right;
}
.result .result-child:first-of-type{
margin-bottom:10px;
}
<div id="wrapper">
<div class="result">
<div class="result-child">1</div>
<div class="result-child">1</div>
</div>
<div class="result">
<div class="result-child">2</div>
<div class="result-child">2</div>
</div>
</div>
Loop code:
for($i = 0; $i<$half; $i++) {
echo "<div class='result'>";
echo "<div class='result-child'>".$items[$k]."</div>"; //first item
echo "<div class='result-child'>".$items[$k+1]."</div>"; //second item
echo "</div>";
$k = $k+2;
}