Layout layoutstackspacing

Auto-Stack (Vertical)

Utility layout for stacking elements with consistent spacing.

Auto-Stack (Vertical)

Usage

Copy the full block below to use this component with its imports.

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>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/Auto-Stack(Vertical).astro and paste the following code:

astro 
---
interface Props { gap?: string; }
const { gap = '1.5rem' } = Astro.props;
---
<div class="v-stack" style={`--gap: ${gap}`}><slot /></div>
<style>
  .v-stack { display: flex; flex-direction: column; gap: var(--gap); }
</style>
--- interface Props { gap?: string; } const { gap = '1.5rem' } = Astro.props; --- <div class="v-stack" style={`--gap: ${gap}`}><slot /></div> <style> .v-stack { display: flex; flex-direction: column; gap: var(--gap); } </style>

Quick Info

Category
Layout
Filename
Auto-Stack(Vertical).astro
Dependencies
None — pure Astro + CSS
Tags
layoutstackspacing