Base Grid layout

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://rawgithub.com/desandro/masonry/v2.1.08/jquery.masonry.js"></script>
<div class="container">
<div class="row grid">
  <div class="card">
   <h3>
     Card header
   </h3>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque suscipit turpis, eu congue leo scelerisque ac. Cras ante dolor, sodales non dictum vitae, convallis eget nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque suscipit turpis, eu congue leo scelerisque ac. Cras ante dolor, sodales non dictum vitae, convallis eget nisi.
   </p>
   <button class="btn btn-info">
     Click me
   </button>
  </div><!-- End .card -->
  <div class="card">
   <h3>
     Card header
   </h3>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque suscipit turpis, eu congue leo scelerisque ac. Cras ante dolor, sodales non dictum vitae, convallis eget nisi. 
   </p>
   <button class="btn btn-info">
     Click me
   </button>
  </div><!-- End .card -->
  <div class="card">
   <h3>
     Card header
   </h3>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque suscipit turpis, eu congue leo scelerisque ac. Cras ante dolor, sodales non dictum vitae, convallis eget nisi.
   </p>
   <button class="btn btn-info">
     Click me
   </button>
  </div><!-- End .card -->
  <div class="card">
   <h3>
     Card header
   </h3>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque suscipit turpis, eu congue leo scelerisque ac. Cras ante dolor, sodales non dictum vitae, convallis eget nisi. Lorem ipsum dolor sit amet
   <button class="btn btn-info">
     Click me
   </button>
  </div><!-- End .card -->
  <div class="card">
   <h3>
     Card header
   </h3>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque...

CSS

body {
	padding: 25px;
}
.card {
  width: 30%;
	float: left;
  padding: 9px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 5px;
}

.card button {
	display: block;
	margin-top: 20px;
}

JavaScript

$( function() {

    var $container = $('.grid').masonry({
        itemSelector: '.card',
        columnWidth: 300
    });
});