JSFiddle - React, Tailwind, and code Playground

by Alexander Erko

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div  class="home">
  <div class="container">
    <div class="row">
      <div class="col-xs-9 col-sm-9">
        <div id="home-grid" class="home-center">
          <div class="row">
            <div id="home-grid">
              <div class="col-xs-4 grid-item">
                <article class="page clearfix">
                  <figure class="page-image">
                    <img src="http://web-ui.ru/uploads/images/ui_kits/lookamore.png" />
                  </figure>
                  <div class="page-body">
                    <h3 class="page-title">
                        Очень длинный заголовок, из-за которого происходит увеличение длины всего блока
                    </h3>
                    <div class="page-category">
                        UI Kits
                    </div>
                  </div>      
                </article>       
              </div>
                
              <div class="col-xs-4 grid-item">
                  <article class="page clearfix">
                    <figure class="page-image">
                      <img src="http://web-ui.ru/uploads/images/ui_kits/lookamore.png">
                    </figure>
                    <div class="page-body">
                        <h3 class="page-title">Интерфейс приложения в PSD</h3>
                        <div class="page-category">UI Kits</div>
                    </div>
                          
                  </article>       
              </div>
              <div class="col-xs-4 grid-item">
                  <article class="page clearfix">
                    <figure...

CSS

.home{
    padding-top: 20px;
}
.page{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #dee2e7;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}
.page-image{
    display: block;
    width: 100%;
    height: 56.25%;
    overflow: hidden;
}
.page-image img{
    display: block;
    width: 100%;
    height: 100%;
}
.page-body{
    padding: 10px;
}
.page-title{
    margin: 0 0 5px;
    font-size: 14px;
}
.page-category{
    font-size: 12px;
    color: #24aa98;
}

JavaScript

$(function(){
	$('#home-grid').masonry({
      // options
      itemSelector: '.grid-item'
    });
});