vue-stack-grid

StackGrid is a Vue 3 component designed to build fast, dynamic masonry or stack layouts that automatically adapt to container width. It simplifies creating visually appealing grids with built-in smooth animations for item changes.

Key Features

• Responsive Layout — Automatically adjusts column count based on container width.
• Smooth Transitions — Offers preset animations (fade, scale, slide-up, slide-fade) or custom transition configurations for add, remove, and reflow events.
• Customizable Grid — Control minimum column width and horizontal/vertical gutters.
• Flexible Slot System — Use the item slot to render any content within grid items.
• TypeScript Support — Includes full TypeScript definitions for robust development.
• Programmatic Control — Exposes a reflow() method to manually trigger layout recomputation and emits events on layout updates.

Philosophy

StackGrid prioritizes performance and developer experience, using Vue 3's Composition API for lightweight, GPU-friendly transforms while providing extensive customization through a simple API.