Dynamically create a grid layout using div tag in PHP

So I have a question similar to this one but I'm applying it only in vanilla PHP and not in wordpress. After countless hours of struggle I finally got the answer but somehow if I increase the size of my grid number the items are not aligning.

I want it to look like this:

----------- - 1 2 3 4 - -----------

But:
As stated on my problem if I tried to increase the grid (or more precisely the item) it becomes like this:

----------- - 1 2 3 4 - - 5 - -6 - -7 - -----------

It becomes cluttered. Below is the code that I'm trying to experiment.

';

while($item 
    ';
    }
    else {
        $html_tag .= ' col '.$i.'
';
    }
    ?>
<?php
    $i++;
    $item++;
}
$html_tag .= '</div>';
?>

<?php echo $html_tag ?>

P.S. I'm using twitter bootstrap 4 for it's responsiveness.

EDIT:

Notice the screenshot below, I just realized that there is an extra text which is 'col ?3' inside the div row instead of another div column (which wasn't created).

enter image description here

Have you use the inspect feature on the browser to see the actual code that gets rendered?
– Arthur Hylton
Jul 2 at 13:05

i did... but I'm having trouble organizing the actual code., i can't seem to control as to where or how i place the if statement
– David Diaz
Jul 2 at 13:09

you can use css display grid property
– ashith
Jul 2 at 13:17

1 Answer
1

You should inspect your code, the final structure is not correct.

This is what you got


        col 0

         col 1

         col 2

         col 3

        col 4
    </div>
</div>

Try with this code

$html = ''; $totalItemPerLine = 3; $totalItem = 7; for($i = 0; $i < $totalItem; $i++) { if($i % $totalItemPerLine == 0) { $html .= '

'; // OPEN ROW
    }

    $html .= ' col '.$i.'
';

    if($i % $totalItemPerLine == ($totalItemPerLine-1))
    {
        $html .= '</div>'; // CLOSE ROW
    }
}

echo $html;

NOTE: You could do exactly the same with a while, but I used a for for the readability

while

for

EDIT:

Based on your comment @DavidDiaz this is the code directly with HTML
But I recommend you to learn POO and use class to do this page

$html = ''; $totalItemPerLine = 3; $totalItem = 7; for($i = 0; $i < $totalItem; $i++) { if($i % $totalItemPerLine == 0) {?>

 
    

     col  


    <?php if($i % $totalItemPerLine == ($totalItemPerLine-1))
    { ?>
        </div> <!-- CLOSE ROW -->
    <?php }
} ?>

thanks, did the trick.,, Iill dig into your code more so I could have a good grasp of it.,
– David Diaz
Jul 2 at 13:30

If you have more questions, I'm here. Don't forget to accept my answer please ;)
– D. Schreier
Jul 2 at 13:33

by the way., if I were to code it into like '<?php if($i % $totalItemPerLine == 0) {?> <div class = "row"> <?php } ?>', will it still work? As you can see it's suppose to have lots of div elements but due too how complicated I tried to solve it I decided it to experiment on it with minimal elements.
– David Diaz
Jul 2 at 13:34

here is the screenshot of what I wanted to actually put.
– David Diaz
Jul 2 at 13:40

If you want to print directly some HTML, you can but you have to do it everywhere and delete the variable $html. In you screenshort there is only one column, is that what you want ? So why try to do a real grid ?
– D. Schreier
Jul 2 at 13:47

$html

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Fjhtyj