Dynamically create a grid layout using div tag in PHP

Question

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.

<div class="container">
<?php
$i=0;
$item=0;
$html_tag = '<div class = "row"><div class="col 3">';

while($item <= 4)
{
?>
    <?php if($i % 4 == 0) {
        $html_tag .= 'col '.$i.'</div>';
    }
    else {
        $html_tag .= '<div class="col"> col '.$i.'</div>';
    }
    ?>
<?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).

Have you use the inspect feature on the browser to see the actual code that gets rendered? — Arthur Hylton
– Arthur Hylton, Commented Jul 2, 2018 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
– David Diaz, Commented Jul 2, 2018 at 13:09

D. Schreier · Accepted Answer · 2018-07-02 13:51:50Z

2

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

This is what you got

<div class="container">
    <div class="row">
        <div class="col 3">col 0</div>
        <div class="col"> col 1</div>
        <div class="col"> col 2</div>
        <div class="col"> col 3</div>
        col 4
    </div>
</div>

Try with this code

$html = '';
$totalItemPerLine = 3;
$totalItem = 7;
for($i = 0; $i < $totalItem; $i++)
{
    if($i % $totalItemPerLine == 0)
    {
        $html .= '<div class="row">'; // OPEN ROW
    }

    $html .= '<div class="col"> col '.$i.'</div>';

    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

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)
    {?>
        <div class="row"> <!-- OPEN ROW -->
    <?php } ?>

    <div class="col"> col <?= $i ?> </div>

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

edited Jul 2, 2018 at 13:51

answered Jul 2, 2018 at 13:12

D. Schreier

1,7961 gold badge24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

David Diaz Over a year ago

thanks, did the trick.,, Iill dig into your code more so I could have a good grasp of it.,

D. Schreier Over a year ago

If you have more questions, I'm here. Don't forget to accept my answer please ;)

David Diaz Over a year ago

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 Over a year ago

here is the screenshot of what I wanted to actually put.

D. Schreier Over a year ago

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 ?

|

Nina · Accepted Answer · 2020-07-13 17:15:06Z

0

Something wrong with the accepted answer. It doesn't close the last row. It needs another condition.

$html = '';
$totalItemPerLine = 3;
$totalItem = 7;
for($i = 0; $i < $totalItem; $i++)
{
    if($i % $totalItemPerLine == 0)
    {
        $html .= '<div class="row">'; // OPEN ROW
    }

    $html .= '<div class="col"> col '.$i.'</div>';

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

echo $html;

answered Jul 13, 2020 at 17:15

Nina

1502 silver badges13 bronze badges

Collectives™ on Stack Overflow

Dynamically create a grid layout using div tag in PHP

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related