不附加在网格的左上角

Question

我有一个<div class="mainbody"></div> CSS为：

    .mainbody{  
    width: 100%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    }

从数据库中检索项目后，我使用

在主体内部动态添加了一个div。

var elem = 
       "<div class='card animated fadeIn' id=" + listItemInfo.currentId+"> 
          <div class='top'>
           <span class='header'><b>"+listItemInfo.Equipment+"</b></span> 
          </div>
          <div class='main'>
             <div class='title'><span class='header2'><b></b></span>
                                <span class='date'></span>
             </div>
             <div class='itemheader'>
               <span class='item model'><b>Model</b></span>
               <span class='item status'><b>Status</b></span>
               <span class='item end'><b>End</b></span>
            </div>
          </div>";

        $(".mainbody").append(elem);

正在运行，但是第一项添加在第一行第二列...请帮助我解决此问题。.第一项必须在左上方