1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Макеты и Сетки layoutstackspacing

Auto-Stack (Vertical)

Вертикальный стек элементов с единообразными отступами и выравниванием.

Auto-Stack (Vertical)

Использование

Скопируйте и вставьте этот код на вашу страницу 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>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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>

Краткая информация

Категория
Макеты и Сетки
Имя файла
Auto-Stack(Vertical).astro
Зависимости
Нет — чистый Astro + CSS
Теги
layoutstackspacing