Semantic UI masonry grid (JS)
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<div class="ui container">
<div class="ui three column doubling stackable grid">
<div class="column">
<div class="ui fluid card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<a class="header">Kristy</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">
Kristy is an art director living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui fluid card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png" class="ui wireframe image">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input placeholder="Add Comment..." type="text">
</div>
</div>
</div>
</div>
<div class="column">
...
CSS
body {
background-color: #f9fafb;
padding-top: 1rem;
}
JavaScript
$('.grid').masonry({
itemSelector: '.column',
percentPosition: true
});