MyClub/DOCS/MYUIBRIX_GRID_LAYOUT_FEATURE.md

# MyUIbrix Grid Layout Feature

## Overview
Enhanced the MyUIbrix Editor with comprehensive **Grid Layout Controls** that allow admins to split sections into different grid configurations with visual templates and fine-grained control.

## New Features Added

### 1. Grid Layout Tab in VisualStylePanel
A new dedicated **Grid** tab has been added to the left sidebar style panel with:

#### Quick Templates (One-Click Layouts)
- 📱 **Single Column** - `1fr`
- ⚖️ **Two Equal** (50% / 50%) - `1fr 1fr`
- 📊 **Left Larger** (66% / 33%) - `2fr 1fr`
- 📊 **Right Larger** (33% / 66%) - `1fr 2fr`
- 🎯 **Three Equal** (33% / 33% / 33%) - `1fr 1fr 1fr`
- 📰 **Featured + Two** (50% / 25% / 25%) - `2fr 1fr 1fr`
- 🔲 **Four Equal** (25% each) - `repeat(4, 1fr)`
- 📋 **Main + Sidebar** (75% / 25%) - `3fr 1fr`

#### Advanced Grid Controls
- **Grid Template Columns**: Custom input for precise control (e.g., `300px 1fr`, `2fr 1fr 1fr`)
- **Grid Template Rows**: Control row sizing
- **Column Gap**: 0-100px slider
- **Row Gap**: 0-100px slider
- **Auto Flow**: Row, Column, Row Dense, Column Dense
- **Align Items**: Vertical alignment (stretch, start, center, end, baseline)
- **Justify Items**: Horizontal alignment (stretch, start, center, end)

### 2. Real-Time Style Application
- Styles are applied **instantly** in preview mode
- Uses CSS Grid with proper `grid-template-columns`, `column-gap`, `row-gap`
- Automatic camelCase to kebab-case conversion
- Smart unit handling (px for numeric values)

### 3. Style Persistence
- Grid styles are stored in state
- Applied to DOM elements via `data-element` attribute
- Works seamlessly with existing variant system

## How to Use

### Step 1: Activate MyUIbrix Editor
1. Navigate to the homepage as an **admin**
2. Click the **purple edit button** (bottom-left corner)
3. Or add `?myuibrix=edit` to the URL

### Step 2: Select an Element
1. Click on any element you want to configure (e.g., hero, news, gallery)
2. The element will be highlighted with a blue border
3. The VisualStylePanel will appear on the left

### Step 3: Configure Grid Layout
1. Click the **Grid** tab in the VisualStylePanel
2. Toggle **"Enable Grid Layout"** switch to ON
3. Choose a quick template or customize:
   - Click a template button for instant layouts
   - OR manually enter `grid-template-columns` values
   - Adjust gaps with sliders
   - Fine-tune alignment options

### Step 4: Preview & Publish
1. Changes apply **instantly in preview** (only visible to you)
2. Click **"Publikovat"** (Publish) in the top bar to save
3. Page reloads and changes go live for all users

## Examples

### Example 1: Blog Post Layout (Left Content + Right Sidebar)
```
grid-template-columns: 2fr 1fr
column-gap: 32px
```
Creates a 66%/33% split - perfect for main content with a sidebar.

### Example 2: Photo Gallery (Three Equal Columns)
```
grid-template-columns: 1fr 1fr 1fr
column-gap: 16px
row-gap: 16px
```
Creates a 3-column equal-width grid with spacing.

### Example 3: Hero Section (Featured + Two)
```
grid-template-columns: 2fr 1fr 1fr
column-gap: 24px
```
Creates a 50%/25%/25% split - large featured item with two smaller items.

### Example 4: Custom Fixed + Flexible
```
grid-template-columns: 300px 1fr
column-gap: 40px
```
Fixed 300px sidebar + flexible main content.

## Technical Details

### Files Modified
1. **`frontend/src/components/editor/VisualStylePanel.tsx`**
   - Added Grid tab with templates and controls
   - Imported `FiGrid` icon and `Button` component
   - Added grid-related state variables

2. **`frontend/src/hooks/usePageElementConfig.ts`**
   - Added `styles` state management
   - Added `handleMyUIbrixStyleChange` event listener
   - Added `getStyles()` function
   - Real-time DOM style application

### Event System
- **Event**: `myuibrix-style-change`
- **Detail**: `{ elementName, styles, previewMode }`
- **Flow**: VisualStylePanel → MyUIbrixEditor → usePageElementConfig → DOM

### CSS Properties Supported
- `display: grid`
- `grid-template-columns`
- `grid-template-rows`
- `grid-column-gap` / `column-gap`
- `grid-row-gap` / `row-gap`
- `grid-auto-flow`
- `align-items`
- `justify-items`
- All standard CSS properties (padding, margin, colors, typography, etc.)

## Browser Compatibility
- CSS Grid is supported in all modern browsers
- IE11 requires fallbacks (not implemented)

## Future Enhancements
- [ ] Responsive grid templates (mobile/tablet breakpoints)
- [ ] Grid area naming and placement
- [ ] Visual grid template builder (drag-and-drop)
- [ ] Save/load custom grid templates
- [ ] Export grid as reusable component

## Troubleshooting

### Styles Not Applying?
1. Ensure element has `data-element="elementName"` attribute
2. Check browser console for errors
3. Verify grid is enabled (toggle switch ON)

### Changes Not Saving?
1. Click **Publikovat** button to save
2. Check for error toasts
3. Verify admin authentication

### Preview Mode vs Production
- In **preview mode** (editing): Changes visible only to you
- After **publishing**: Changes visible to all users
- Use this to test layouts before going live

---

**Created**: 2025-01-15  
**Version**: 1.0  
**Author**: MyUIbrix Development Team