.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */
  grid-auto-rows: 10px; /* Small row height for granular control */
  gap: 10px;
}

.masonry-grid-item {
  grid-row-end: span 20; /* Example: item spans 20 * 10px = 200px height */
  /* For varying heights, you'd calculate this dynamically with JS based on content,
     or use a fixed set of classes like:
     .item-height-1 { grid-row-end: span 15; }
     .item-height-2 { grid-row-end: span 25; }
  */
  background-color: lightblue;
  border-radius: 5px;
  padding: 15px;
  display: flex; /* For content within the item */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Example of items with different heights */
.item-1 { grid-row-end: span 15; } /* 150px tall */
.item-2 { grid-row-end: span 25; } /* 250px tall */
.item-3 { grid-row-end: span 20; } /* 200px tall */
.item-4 { grid-row-end: span 30; } /* 300px tall */
.item-5 { grid-row-end: span 18; } /* 180px tall */

/* Example HTML:
<div class="masonry-grid">
  <div class="masonry-grid-item item-1">Card 1: Short</div>
  <div class="masonry-grid-item item-2">Card 2: Medium-Long</div>
  <div class="masonry-grid-item item-3">Card 3: Medium</div>
  <div class="masonry-grid-item item-4">Card 4: Very Long Content Here</div>
  <div class="masonry-grid-item item-5">Card 5: Slightly Shorter</div>
  <div class="masonry-grid-item item-1">Card 6: Short</div>
  <div class="masonry-grid-item item-3">Card 7: Medium</div>
</div>
*/