🧠 NeuroGrid Layout (Vue 3)

NeuroGrid is an adaptive, content-aware layout component for Vue 3, powered by CSS Grid.
It automatically sizes and aligns child blocks based on their content, and fills visual gaps on all screen sizes.

🚀 Installation

npm install neuro-grid-vue

🚀 Quick Start (Vite + Vue 3)

1. Register the component and styles globally:

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

import NeuroGrid from 'neuro-grid-vue';
import 'neuro-grid-vue/dist/style.css';

const app = createApp(App);
app.component('NeuroGrid', NeuroGrid);

app.mount('#app');

Use in your component:

<template>
    <NeuroGrid>
        <div class='neuro-block'>Simple Block</div>
        <div class='neuro-block' data-size='wide'>
            Wide Block
        </div>
        <div class='neuro-block'>
            <div class='mini-grid'>
                <div class='mini'>Item A</div>
                <div class='mini'>Item B</div>
            </div>
        </div>
    </NeuroGrid>
</template>

✨ Features 📐 Auto-sizing: blocks adjust based on content height and mini-elements

🧩 Gap filling: automatically expands elements to prevent empty grid spaces

🧠 Orphan block fix: last block always aligns neatly

📱 Responsive: switches between 1, 2, or 3 columns based on screen width

🎯 Manual sizing: override with data-size and data-size-manual

🎨 Styled with effects: hover glow and blur backgrounds

Example

<div class='neuro-block' data-size='wide' data-size-manual>
    Fixed width block
</div>

🧱 Mini Grid

<div class='neuro-block'>
    <div class='mini-grid'>
        <div class='mini'>Option 1</div>
        <div class='mini'>Option 2</div>
        <div class='mini'>Option 3</div>
    </div>
</div>

📱 Responsive Grid Layout

| Viewport Width | Grid Columns | | -------------- | ------------ | | ≥ 901px | 3 columns | | 601px – 900px | 2 columns | | ≤ 600px | 1 column |