JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="masonry-grid">
  <div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel perspiciatis illum tempora ut beatae cum hic molestias necessitatibus, natus quam omnis qui id soluta tenetur voluptatem fugiat odio ducimus blanditiis.</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel perspiciatis illum tempora ut beatae cum hic molestias necessitatibus, natus quam omnis qui id soluta tenetur voluptatem fugiat odio ducimus blanditiis.</div>
  <!-- Add more grid items as needed -->
</div>

CSS

body {
	column-count: 4;
  column-gap: 10px;
}

.masonry-grid {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
  break-inside: avoid;
}

.grid-item {
  grid-row: 1 / -1;
  grid-column: 1;
 background: grey;
 padding: 25px;
}