<div class="container-fluid">
<!-- add extra container element for Packery -->
<div class="grid">
<!-- add sizing element for columnWidth -->
<div class="grid-sizer col-md-6 col-xl-4">s</div>
<!-- items use Bootstrap .col- classes -->
<div class="grid-item col-md-6 col-xl-4">
<!-- wrap item content in its own element -->
<div class="grid-item-content">
<div class="card">
<div class="card-header handle">
<h4>Card Title</h4>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum enim sapiente placeat repellat neque sed, iusto iure optio qui rem porro in exercitationem ipsa modi quis fugiat dolores. Eos, impedit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum enim sapiente placeat repellat neque sed, iusto iure optio qui rem porro in exercitationem ipsa modi quis fugiat dolores. Eos, impedit.</p>
</div>
</div>
</div>
</div>
<div class="grid-item col-md-6 col-xl-4">
<div class="grid-item-content">
<div class="card">
<div class="card-header handle">
<h4>Card Title</h4>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum enim sapiente placeat repellat neque sed, iusto iure optio qui rem porro in exercitationem ipsa modi quis fugiat dolores. Eos, impedit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum enim sapiente placeat repellat neque sed, iusto iure optio qui rem porro in exercitationem ipsa modi quis fugiat dolores. Eos, impedit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum enim sapiente placeat repellat neque sed, iusto iure optio qui rem porro in exercitationem ipsa modi quis fugiat dolores. Eos, impedit.</p>
</div>
</div>
</div>
</div>
<div class="grid-item col-md-6 col-xl-4">
<div class="grid-item-content">
<div class="card">
<div class="card-header handle">
<h4>Card Title</h4>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum enim sapiente placeat repellat neque sed, iusto iure optio qui rem porro in exercitationem ipsa modi quis fugiat dolores. Eos, impedit.</p>
</div>
</div>
</div>
</div>
<div class="grid-item col-md-6 col-xl-4">
<div class="grid-item-content">
<div class="card">
<div class="card-header handle">
<h4>Card Title</h4>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum enim sapiente placeat repellat neque sed, iusto iure optio qui rem porro in exercitationem ipsa modi quis fugiat dolores. Eos, impedit.</p>
</div>
</div>
</div>
</div>
<div class="grid-item col-md-6 col-xl-4">
<div class="grid-item-content">
<div class="card">
<div class="card-header handle">
<h4>Card Title</h4>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum enim sapiente placeat repellat neque sed, iusto iure optio qui rem porro in exercitationem ipsa modi quis fugiat dolores. Eos, impedit.</p>
</div>
</div>
</div>
</div>
<div class="grid-item col-md-6 col-xl-4">
<div class="grid-item-content">
<div class="card">
<div class="card-header handle">
<h4>Card Title</h4>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum enim sapiente placeat repellat neque sed, iusto iure optio qui rem porro in exercitationem ipsa modi quis fugiat dolores. Eos, impedit.</p>
</div>
</div>
</div>
</div>
</div>
</div>