1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Estructura & Layout layoutstackspacing

Auto-Stack (Vertical)

Contenedor de pila vertical con espaciado uniforme y alineación adaptable.

Auto-Stack (Vertical)

Uso

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

astro 
---
import { Auto-Stack(Vertical) } from 'astro-component-kit';
---

<VerticalStack gap="1.5rem">Content</VerticalStack>
--- import { Auto-Stack(Vertical) } from 'astro-component-kit'; --- <VerticalStack gap="1.5rem">Content</VerticalStack>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/Auto-Stack(Vertical).astro:

astro 
---
/**
 * VerticalStack — A flexible vertical layout with configurable gap spacing.
 *
 * Stacks children vertically with consistent spacing between them.
 * Ideal for grouping related content like form fields, card lists, or text blocks.
 *
 * @param {string} gap - Space between children. Default: '1.5rem'.
 * @param {string} className - Additional CSS class to apply.
 *
 * @example
 * ```astro
 * <VerticalStack gap="2rem">
 *   <Card title="First" />
 *   <Card title="Second" />
 *   <Card title="Third" />
 * </VerticalStack>
 * ```
 */
interface Props {
  gap?: string;
  className?: string;
}

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

<div class:list={['vertical-stack', className]} style={`--stack-gap: ${gap}`}>
  <slot />
</div>

<style>
  .vertical-stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }
</style>
--- /** * VerticalStack — A flexible vertical layout with configurable gap spacing. * * Stacks children vertically with consistent spacing between them. * Ideal for grouping related content like form fields, card lists, or text blocks. * * @param {string} gap - Space between children. Default: '1.5rem'. * @param {string} className - Additional CSS class to apply. * * @example * ```astro * <VerticalStack gap="2rem"> * <Card title="First" /> * <Card title="Second" /> * <Card title="Third" /> * </VerticalStack> * ``` */ interface Props { gap?: string; className?: string; } const { gap = '1.5rem', className = '' } = Astro.props; --- <div class:list={['vertical-stack', className]} style={`--stack-gap: ${gap}`}> <slot /> </div> <style> .vertical-stack { display: flex; flex-direction: column; gap: var(--stack-gap); } </style>

Información Rápida

Categoría
Estructura & Layout
Nombre de archivo
Auto-Stack(Vertical).astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
layoutstackspacing