Grid Component
   A flexible grid system for creating responsive layouts.
   
   Usage:
   - Basic grid with equal-width columns
   - Responsive grid with breakpoint-specific column sizes
   - Auto-layout columns
   - Variable width content
   - Alignment and ordering
   - Nesting
   - Gutters
   
   Parameters:
   - columns: array - List of columns with their properties (required)
     - class: string - Custom column classes (optional)
     - size: number|'auto'|null - Column size (1-12, auto, or null for equal width) (optional)
     - breakpoint: string - Responsive breakpoint (sm|md|lg|xl|xxl) (optional)
     - offset: number - Column offset (0-11) (optional)
     - order: number|string - Column order (0-5, first, last) (optional)
     - content: string - Column content (required)
     - align: string - Vertical alignment (start|center|end) (optional)
   - gutters: number - Gutter size (0-5) (optional)
   - row_class: string - Additional row classes (optional)
   - vertical_align: string - Vertical alignment (start|center|end) (optional)
   - horizontal_align: string - Horizontal alignment (start|center|end|around|between|evenly) (optional)

ThemedComponent::make('layout/grid')
    ->columns([
        [
            'size' => 12,
            'content' => '<div style="border: 1px solid #ccc; padding: 10px;">Full width column</div>'
        ],
        [
            'size' => 6,
            'content' => '<div style="border: 1px solid #ccc; padding: 10px;">Half width</div>'
        ],
        [
            'size' => 6,
            'content' => '<div style="border: 1px solid #ccc; padding: 10px;">Half width</div>'
        ],
        [
            'size' => 4,
            'content' => '<div style="border: 1px solid #ccc; padding: 10px;">One third</div>'
        ],
        [
            'size' => 4,
            'content' => '<div style="border: 1px solid #ccc; padding: 10px;">One third</div>'
        ],
        [
            'size' => 4,
            'content' => '<div style="border: 1px solid #ccc; padding: 10px;">One third</div>'
        ]
    ])
    ->render();

ThemedComponent::make('layout/grid')
    ->gutters(3)
    ->row_class('custom-row-class')
    ->vertical_align('center')
    ->horizontal_align('between')
    ->columns([
        [
            'size' => 4,
            'breakpoint' => 'md',
            'offset' => 2,
            'order' => 1,
            'align' => 'start',
            'content' => '<div style="border: 1px solid #ccc; padding: 10px; height: 100px;">Column 1: Responsive at md, offset by 2, order 1</div>'
        ],
        [
            'size' => 4,
            'breakpoint' => 'lg',
            'offset' => 0,
            'order' => 3,
            'align' => 'center',
            'content' => '<div style="border: 1px solid #ccc; padding: 10px; height: 100px;">Column 2: Responsive at lg, order 3</div>'
        ],
        [
            'size' => 'auto',
            'breakpoint' => 'sm',
            'offset' => 1,
            'order' => 2,
            'align' => 'end',
            'content' => '<div style="border: 1px solid #ccc; padding: 10px; height: 100px;">Column 3: Auto size, responsive at sm, offset by 1, order 2</div>'
        ]
    ])
    ->render();

{# Grid Component
   A flexible grid system for creating responsive layouts.
   
   Usage:
   - Basic grid with equal-width columns
   - Responsive grid with breakpoint-specific column sizes
   - Auto-layout columns
   - Variable width content
   - Alignment and ordering
   - Nesting
   - Gutters
   
   Parameters:
   - columns: array - List of columns with their properties (required)
     - class: string - Custom column classes (optional)
     - size: number|'auto'|null - Column size (1-12, auto, or null for equal width) (optional)
     - breakpoint: string - Responsive breakpoint (sm|md|lg|xl|xxl) (optional)
     - offset: number - Column offset (0-11) (optional)
     - order: number|string - Column order (0-5, first, last) (optional)
     - content: string - Column content (required)
     - align: string - Vertical alignment (start|center|end) (optional)
   - gutters: number - Gutter size (0-5) (optional)
   - row_class: string - Additional row classes (optional)
   - vertical_align: string - Vertical alignment (start|center|end) (optional)
   - horizontal_align: string - Horizontal alignment (start|center|end|around|between|evenly) (optional)
#}

<div 
    class="row
        {% if content.gutters is defined %} g-{{ content.gutters }}{% endif %}
        {% if content.vertical_align %} align-items-{{ content.vertical_align }}{% endif %}
        {% if content.horizontal_align %} justify-content-{{ content.horizontal_align }}{% endif %}
        {% if content.row_class %} {{ content.row_class }}{% endif %}
    "
>
    {% for column in content.columns %}
    <div class="
        {% if column.class %}
            {{ column.class }}
        {% else %}
            col{% if column.size %}-{{ column.size }}{% endif %}
            {% if column.breakpoint %}-{{ column.breakpoint }}{% endif %}
        {% endif %}
        {% if column.offset %}
            {% if column.breakpoint %}
                offset-{{ column.breakpoint }}-{{ column.offset }}
            {% else %}
                offset-{{ column.offset }}
            {% endif %}
        {% endif %}
        {% if column.order %}
            {% if column.breakpoint %}
                order-{{ column.breakpoint }}-{{ column.order }}
            {% else %}
                order-{{ column.order }}
            {% endif %}
        {% endif %}
        {% if column.align %} align-self-{{ column.align }}{% endif %}
    ">
        {{ column.content|raw }}
    </div>
    {% endfor %}
</div>