JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>
<div class="masonry">
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="https://static.boredpanda.com/blog/wp-content/uploads/2016/12/Meet-Zo-the-cat-who-literally-wears-her-heart-on-her-chest-585db8837f1a1__700.jpg" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Media Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="https://www.petmd.com/sites/default/files/petmd-cat-fears-5.jpg" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Media Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Media Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
SCSS
.masonry { /* Masonry container */
column-count: 3;
column-gap: 1em;
@media(max-width: 768px){
column-count: 2;
}
@media(max-width: 480px){
column-count: 1;
}
.uk-card { // Masonry bricks or child elements
margin: 0 0 1em;
}
}