title: Not appending on the top left corner of grid
body: <p>I have a <code>&lt;div class="mainbody"&gt;&lt;/div&gt;</code>
  with CSS of: </p>
  
  <pre><code>    .mainbody{  
      width: 100%;
      display: grid;
      grid-template-columns: 33% 33% 33%;
      }
  </code></pre>
  
  <p>After retrieving items from the database, I dynamically added a div inside the main body using</p>
  
  <pre><code>var elem = 
         "&lt;div class='card animated fadeIn' id=" + listItemInfo.currentId+"&gt; 
            &lt;div class='top'&gt;
             &lt;span class='header'&gt;&lt;b&gt;"+listItemInfo.Equipment+"&lt;/b&gt;&lt;/span&gt; 
            &lt;/div&gt;
            &lt;div class='main'&gt;
               &lt;div class='title'&gt;&lt;span class='header2'&gt;&lt;b&gt;&lt;/b&gt;&lt;/span&gt;
                                  &lt;span class='date'&gt;&lt;/span&gt;
               &lt;/div&gt;
               &lt;div class='itemheader'&gt;
                 &lt;span class='item model'&gt;&lt;b&gt;Model&lt;/b&gt;&lt;/span&gt;
                 &lt;span class='item status'&gt;&lt;b&gt;Status&lt;/b&gt;&lt;/span&gt;
                 &lt;span class='item end'&gt;&lt;b&gt;End&lt;/b&gt;&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;";
  
          $(".mainbody").append(elem);
  </code></pre>
  
  <p>It's working, but the first item is added on the 1st row, 2nd column... help me fix this please.. the 1st item must be on the top left</p>