title: How can I set 4 items per row? (PHP/HTML/CSS) non table
body: <p>I want to print out the result can be each column have fixed row, like each row have 4 elements</p>
  
  <blockquote>
    <p>My code:</p>
  </blockquote>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Print your data&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
      &lt;style&gt;
          * {
              font-family: Arial;
          }
          p.inline {
              display: inline-block;
          }
          span { 
              font-size: 13px;
          }
          .grid-container { 
              position: relative;
              display: inline-block; 
          }
          .a { 
              position: relative;
              display: inline-block;
              margin: 15px;
          }
          .print {
              margin-top: 10px;
              background-color: navy;
              color: white;
          }
          .print:hover {
              color: white;
              background-color: black;
          }
      &lt;/style&gt;
  
      &lt;style type="text/css" media="print"&gt;
          @page 
          {
              size: auto;   /* auto is the initial value */
              margin: 1mm;  /* this affects the margin in the printer settings */
  
          }
          .grid-container { 
              position: relative;
              display: inline-block;
          }
          .a { 
              position: relative;
              display: inline-block;
              margin: 15px;
          }
          .print {
              display: none;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="col text-center"&gt;
          &lt;button onclick="window.print();" class="print btn btn-lg"&gt;Print your data&lt;/button&gt;
      &lt;/div&gt;
      &lt;div style="margin: 1%"&gt;
  
              &lt;?php
              require 'vendor/autoload.php';
  
                  $row = 1;
                  if (($csvfile = fopen($_FILES['file']['tmp_name'], "r")) !== FALSE) {
                      while (($csvdata = fgetcsv($csvfile, 1000, ",")) !== FALSE) {
  
                          $colcount = count($csvdata);
  
                          //Skip the CSV first line, start read from second line
                          if($row == 1) {
  
                              $row++; continue; 
                          }
  
                          if($colcount!=5) {
                              $error = 'Column count incorrect';
                          } else {
  
                              $imageData = base64_encode(file_get_contents($csvdata[4]));
                              $generator = new \Picqer\Barcode\BarcodeGeneratorPNG();
                                  echo '&lt;div class="grid-container"&gt;';
                                  echo '&lt;div class="a"&gt;
                                        &lt;img src="data:image;base64,'.$imageData.'" width="50"/&gt;
                                        &lt;div&gt;&lt;b&gt;Item: '.$csvdata[0].'&lt;/b&gt;&lt;/div&gt;
                                        &lt;div&gt;
                                        &lt;img src="data:image/png;base64,' . base64_encode($generator-&gt;getBarcode("$csvdata[1]", $generator::TYPE_CODE_128)) . '"/&gt;
                                        &lt;div&gt;&lt;b&gt;'.$csvdata[1].'&lt;/b&gt;&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;span&gt;&lt;b&gt;Price: '.$csvdata[2].'&lt;/b&gt;&lt;/span&gt;
                                        &lt;div&gt;
                                        &lt;span&gt;&lt;b&gt;Desc: &lt;/b&gt;'.$csvdata[3].'&lt;/span&gt;
                                        &lt;/div&gt;
                                        &lt;/div&gt;&lt;/div&gt;';
                          }
                      }
                      fclose($csvfile);
                  }
              ?&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Right now the printing result:</p>
  
  <p>image of the result:<br>
  <a href="https://i.stack.imgur.com/mwJyq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mwJyq.png" alt="image of the result"></a></p>
  
  <hr>
  
  <p>I want the printing result:</p>
  
  <p>I want the result image 1:<br>
  <a href="https://i.stack.imgur.com/VFiyi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VFiyi.png" alt="I want the result image 1"></a></p>
  
  <p>I want the result image 2:<br>
  <a href="https://i.stack.imgur.com/z8uCQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z8uCQ.png" alt="I want the result image 2"></a></p>
  
  <hr>
  
  <p>I checked online the example, but most of the example is have different <code>&lt;tr&gt;</code> tag, but mine is not like a table, I only have one value want to show.</p>
  
  <p>So, in this case how can I make it the printing layout is fixed the width of each elements and can fixed number of each row elements?</p>