# 🧠 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

```bash
npm install neuro-grid-vue
```

# 🚀 Quick Start (Vite + Vue 3)

# 1. Register the component and styles globally:

```js
// 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:

```js
<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

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

# 🧱 Mini Grid

```js
<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     |