How to make grid boxes appear correctly without overlapping. Considering that the height of them will be variable, because the content is dynamic.
new Vue({
el: "#app",
data: {
title: 'Boxes dinamicos sem encavalamento',
itens:[
{
title: "Quis autem vel eum iure reprehenderit",
description: "reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
},
{
title: "doloremque laudantium",
description: "dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
},
{
title: "maiores alias consequatur aut perferendis",
description: "doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis"
},
{
title: "laborum et dolorum",
description: "placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus."
},
{
title: "Nam libero tempore",
description: " Itaque earum rerum hic tenetur a sapiente delectus"
},
{
title: "Nemo enim ipsam voluptatem quia",
description: "voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur"
},
{
title: "Et harum quidem rerum facilis",
description: "molestiae non recusandae illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
},
{
title: "Quis autem vel eum iure reprehenderit",
description: "reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
}
]
}
});
a.box:hover{
text-decoration:none
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
<h1>{{title}}</h1>
<div class="container">
<div class="row">
<div v-for="item in itens" class="col-xs-6 col-md-3 col-lg-2">
<a href="#" class="thumbnail box">
<img class="img-responsive" src="https://placehold.it/500x300"alt="" />
<h4>{{item.title}}</h4>
<p>{{item.description}}</p>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>