Динамически создавать макет сетки, используя тег div в PHP

Question

Итак, у меня есть вопрос, похожий на этот one , но я применяю его только в ванильном PHP, а не в WordPress. После бесчисленных часов борьбы я, наконец, получил ответ, но каким-то образом, если я увеличу размер своего номера сетки, элементы не выровняются.

Я хочу, чтобы это выглядело так:

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

Но: Как указано в моей проблеме, если я попытался увеличить сетку (или, точнее, элемент), это выглядит так:

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

Он становится загроможденным. Ниже приведен код, который я пытаюсь экспериментировать.

<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. Я использую Twitter начальной загрузки 4 для его отзывчивости.

EDIT:

Обратите внимание на скриншот ниже, я только что понял, что внутри строки div есть дополнительный текст «col? 3» вместо другого столбца div (который не был создан).

Answer 1

Вы должны проверить свой код, окончательная структура не верна.

Это то, что вы получили

<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>

Попробуйте с этим кодом

$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;

ПРИМЕЧАНИЕ: Вы можете сделать то же самое с while, но я использовал for для удобства чтения

EDIT:

На основании вашего комментария @DavidDiaz это код напрямую с HTML Но я рекомендую вам изучить POO и использовать класс, чтобы сделать эту страницу

$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 }
} ?>