Masonry Layout

---
/**
 * MasonryGrid — A CSS-based masonry layout for items of varying heights.
 */
interface Props {
  columns?: number;
  gap?: string;
  className?: string;
}

const { columns = 3, gap = '1.5rem', className = '' } = Astro.props;
---

<div class={`masonry ${className}`} style={`--cols: ${columns}; --gap: ${gap};`}>
  <slot>
    <div class="masonry-demo-item" style="height: 120px;">Item 1 (Small)</div>
    <div class="masonry-demo-item" style="height: 200px;">Item 2 (Tall)</div>
    <div class="masonry-demo-item" style="height: 160px;">Item 3 (Medium)</div>
    <div class="masonry-demo-item" style="height: 140px;">Item 4 (Medium)</div>
    <div class="masonry-demo-item" style="height: 180px;">Item 5 (Tall)</div>
    <div class="masonry-demo-item" style="height: 110px;">Item 6 (Small)</div>
  </slot>
</div>

<style>
  .masonry {
    columns: var(--cols, 3) 220px;
    column-gap: var(--gap, 1.5rem);
    width: 100%;
  }
  .masonry :global(> *) {
    break-inside: avoid;
    margin-bottom: var(--gap, 1.5rem);
    display: block;
  }
  .masonry-demo-item {
    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
    border-radius: var(--r-md, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-weight: 600;
  }
</style>