title: Dynamically create a grid layout using div tag in PHP
body: <p>So I have a question similar to this <a href="https://stackoverflow.com/questions/32766409/using-php-loop-to-add-bootstrap-rows-and-proper-column-numbers-to-elements">one</a> 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.</p>
  
  <p><strong>I want it to look like this:</strong></p>
  
  <pre><code>-----------
  - 1 2 3 4 -
  -----------
  </code></pre>
  
  <p><strong>But:</strong>
  As stated on my problem if I tried to increase the grid (or more precisely the item) it becomes like this:</p>
  
  <pre><code>-----------
  - 1 2 3 4 -
  -   5     -
  -6        -
  -7        -
  -----------
  </code></pre>
  
  <p>It becomes cluttered. Below is the code that I'm trying to experiment.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;?php
  $i=0;
  $item=0;
  $html_tag = '&lt;div class = "row"&gt;&lt;div class="col 3"&gt;';
  
  while($item &lt;= 4)
  {
  ?&gt;
      &lt;?php if($i % 4 == 0) {
          $html_tag .= 'col '.$i.'&lt;/div&gt;';
      }
      else {
          $html_tag .= '&lt;div class="col"&gt; col '.$i.'&lt;/div&gt;';
      }
      ?&gt;
  &lt;?php
      $i++;
      $item++;
  }
  $html_tag .= '&lt;/div&gt;';
  ?&gt;
  
  &lt;?php echo $html_tag ?&gt;
  </code></pre>
  
  <p>P.S. I'm using twitter bootstrap 4 for it's responsiveness.</p>
  
  <p>EDIT:</p>
  
  <p>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).</p>
  
  <p><a href="https://i.stack.imgur.com/qiBtx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qiBtx.jpg" alt="enter image description here"></a></p>