网格视图订单问题

Question

我正在为我的应用程序创建一个网格视图;我有这个CSS：

.grid{margin-left: -35px!important;}
 .grid li { float: left; width:235px; height: 150%;  margin-top: 0px !important;}
 .grid li .tag-item {font-size: 8px;}
 .grid li .result-body{width: 200px;}
 .grid li .discovereedKeywords{display:none;}/*hidden until i figure out a better layout*/
 .grid li .LikeShareComment{width: 200px;color:#616161;font-size: 12px;}
 .grid li .hideThis{display:none;}
 .grid li .gridTitle{max-width: 140px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
 .grid li .gridAuthor{max-width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
 .grid li .gridProfile{width:120px;}
 .grid li .gridSize{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
 .grid .borderforgrid{
    z-index: 10;
    border-style: solid;
    border-top: none;
    border-width: 1px;
    border-color: #FAFAFA;
    padding: 10px 20px 10px;
    box-shadow: 1px 1px 5px #888888;
    margin-top: 30px !important;
    color: #585858;
    margin-left: 10px;
}

它看起来不错，但事情是当盒子＆＃39;内容不同，该部分将进入一个持续的地方，而不是按顺序显示。

即使他们有不同的内容，我怎么能让它看起来像下面？

我也在这个应用程序中使用bootstrap