1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Estructura & Layout layoutgridcards

Glass Card Grid

Cuadrícula responsiva de tarjetas con desenfoque de cristal y bordes luminosos.

Glass Card Grid

Uso

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

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

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

Instalación Manual

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

astro 
---
/**
 * GlassCardGrid — A responsive grid specifically designed for card layouts with auto-fill columns.
 * 
 * @param {string} minWidth - Minimum width of columns (default: '300px').
 * @param {string} gap - Gap between items (default: '2rem').
 */
interface Props {
  minWidth?: string;
  gap?: string;
  className?: string;
}

const { minWidth = '300px', gap = '2rem', className = '' } = Astro.props;
---

<div class={`card-grid ${className}`} style={`--min-width: ${minWidth}; --gap: ${gap};`}>
  <slot />
</div>

<style>
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-width, 300px), 1fr));
    gap: var(--gap, 2rem);
    width: 100%;
  }
</style>
--- /** * GlassCardGrid — A responsive grid specifically designed for card layouts with auto-fill columns. * * @param {string} minWidth - Minimum width of columns (default: '300px'). * @param {string} gap - Gap between items (default: '2rem'). */ interface Props { minWidth?: string; gap?: string; className?: string; } const { minWidth = '300px', gap = '2rem', className = '' } = Astro.props; --- <div class={`card-grid ${className}`} style={`--min-width: ${minWidth}; --gap: ${gap};`}> <slot /> </div> <style> .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min-width, 300px), 1fr)); gap: var(--gap, 2rem); width: 100%; } </style>

Información Rápida

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