1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Estructura & Layout layoutmasonrycolumns

Masonry Layout

Disposición tipo masonry para organizar tarjetas de alturas dispares en columnas fluidas.

Masonry Layout

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { MasonryLayout } from 'astro-component-kit';
---

<MasonryGrid>Content</MasonryGrid>
--- import { MasonryLayout } from 'astro-component-kit'; --- <MasonryGrid>Content</MasonryGrid>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/MasonryLayout.astro:

astro 
---
/**
 * 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>
--- /** * 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>

Información Rápida

Categoría
Estructura & Layout
Nombre de archivo
MasonryLayout.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
layoutmasonrycolumns