ha-dashboard-layouts

What this skill does

Works with Lovelace YAML configurations, native layout cards, and mobile-first responsive patterns.
# Home Assistant Dashboard Layouts

Create responsive Home Assistant Lovelace dashboards using native layout types.

## When to Use This Skill

Use this skill when you need to:
- Arrange cards vertically (top-to-bottom stacking) for sequential information
- Place cards side-by-side horizontally for comparisons or related controls
- Create multi-column grid layouts that automatically reflow on mobile
- Build full-screen panel views for maps, cameras, or single-focus displays
- Nest layouts for complex dashboard designs with sections
- Make dashboards responsive with automatic mobile stacking

Do NOT use when:
- You need conditional card visibility (use ha-conditional-cards instead)
- Building forms or input interfaces (use entities card or custom forms)
- You need advanced CSS Grid features (consider layout-card from HACS)

## Usage

1. **Identify user intent**: Map natural language ("side by side", "3 columns") to layout type
2. **Choose layout**: vertical-stack (top to bottom), horizontal-stack (side by side), grid (multi-column), panel (full-screen)
3. **Apply configuration**: Add YAML with appropriate type and options
4. **Test responsiveness**: Verify mobile behavior (grid auto-stacks, horizontal stays side-by-side)
5. **Refine**: Adjust columns, square property, or nest layouts for complex designs

## How to Request Layouts

Map user's natural language to layout types:

**Vertical Stack** (top to bottom):
- "Stack these **vertically**"
- "Put these **one below the other**"
- "**Top to bottom**"

**Horizontal Stack** (side by side):
- "Put these **side by side**"
- "Arrange them **horizontally**"
- "**Next to each other**"
- "Layout in a **row**"

**Grid Layouts**:
- "Use a **3-column grid**" → `columns: 3`
- "Grid with **columns: 4**" → `columns: 4`
- "**Two columns** side by side" → `columns: 2`
- "Make cards **square**" → `square: true`
- "**Equal height and width**" → `square: true`

**Panel View** (full-screen single card):
- "Make this **type: panel**"
- "**Full-screen** card"
- "**Kiosk mode**"

**Nested Layouts**:
- "Vertical stack with **horizontal rows**"
- "Put separator, then **gauges horizontal**, then graph below"
- "Stack sections vertically, but put **cards side-by-side**"

## Layout Types Quick Reference

### 1. Vertical Stack

Cards stack top to bottom, full width.

```python
{
    "type": "vertical-stack",
    "cards": [
        {"type": "entity", "entity": "sensor.temperature"},
        {"type": "entity", "entity": "sensor.humidity"},
        {"type": "entity", "entity": "sensor.pressure"},
    ]
}
```

**Use when:** Cards should stack regardless of screen size.

### 2. Horizontal Stack

Cards arranged left to right, equal width distribution.

```python
{
    "type": "horizontal-stack",
    "cards": [
        {"type": "entity", "entity": "sensor.temperature"},
        {"type": "entity", "entity": "sensor.humidity"},
    ]
}
```

**Use when:** Cards should appear side-by-side on desktop and mobile. Limit to 2-3 cards (more gets cramped on mobile).

### 3. Grid Layouts

Multi-column grid with automatic mobile reflow.

```python
# 3-column grid
{
    "type": "grid",
    "columns": 3,  # Auto-stacks to 1 column on mobile
    "cards": [
        {"type": "entity", "entity": "sensor.temp1"},
        {"type": "entity", "entity": "sensor.temp2"},
        {"type": "entity", "entity": "sensor.temp3"},
        {"type": "entity", "entity": "sensor.temp4"},
        # Cards wrap to next row
    ]
}

# Square cards (equal width/height)
{
    "type": "grid",
    "columns": 3,
    "square": True,  # Forces equal aspect ratio
    "cards": [...]
}
```

**Common column counts:**
- `columns: 2` → Mobile-friendly, compact
- `columns: 3` → Balanced tablet/desktop
- `columns: 4` → Wide desktop screens

**Use `square: true` when:** Uniform appearance needed (gauges, icons, visual consistency).

### 4. Panel View

Full-screen single card (view-level property, not card type).

```python
{
    "views": [
        {
            "title": "Map",
            "type": "panel",  # ← VIEW property
            "cards": [
                {"type": "map", "entities": ["person.john"]}
                # Only ONE card allowed
            ]
        }
    ]
}
```

**Use when:** Full-screen dashboards, kiosk mode, maps, cameras, single-focus displays.

### 5. Nested Layouts

Combine layouts for complex designs.

```python
# Pattern: Vertical stack containing sections
{
    "type": "vertical-stack",
    "cards": [
        # Section 1: Horizontal cards
        {
            "type": "custom:bubble-card",
            "card_type": "separator",
            "name": "Quick Controls",
        },
        {
            "type": "horizontal-stack",
            "cards": [
                {"type": "entity", "entity": "sensor.temp"},
                {"type": "entity", "entity": "sensor.humidity"},
            ]
        },
        # Section 2: Grid layout
        {
            "type": "custom:bubble-card",
            "card_type": "separator",
            "name": "Sensors",
        },
        {
            "type": "grid",
            "columns": 3,
            "cards": [
                {"type": "entity", "entity": "sensor.pm25"},
                {"type": "entity", "entity": "sensor.co2"},
                {"type": "entity", "entity": "sensor.voc"},
            ]
        },
    ]
}
```

**Common nesting patterns:**
- `vertical-stack` → `horizontal-stack` (sections with side-by-side cards)
- `vertical-stack` → `grid` (sections with multi-column cards)
- `horizontal-stack` → `vertical-stack` (two-column responsive layout)

## Mobile Responsiveness

**Grid cards automatically reflow:**
- Desktop: Respects `columns` value
- Mobile: Stacks to 1 column
- No media queries needed

**Horizontal stacks:**
- Remain side-by-side on mobile
- Use sparingly (2-3 cards max)

**Best practices:**
- Test on actual mobile device (browser resize ≠ mobile behavior)
- Place frequently-used controls at top
- Use `columns: 2` or `columns: 3` for mobile-friendly grids

## Advanced Layouts

For more complex requirements, see reference files:

- **[references/sections-view.md](references/sections-view.md)** - Modern drag-and-drop Sections View (HA 2024+)
- **[references/layout-card.md](references/layout-card.md)** - HACS layout-card with CSS Grid and media queries
- **[references/view-types.md](references/view-types.md)** - Masonry, Sidebar, and other view types
- **[references/responsive-patterns.md](references/responsive-patterns.md)** - Advanced mobile-first patterns

## Common Dashboard Patterns

### Temperature Gauges in Grid

```python
{
    "type": "grid",
    "columns": 4,
    "cards": [
        {
            "type": "custom:modern-circular-gauge",
            "entity": "sensor.office_temperature",
            "name": "Office",
            "min": 10,
            "max": 40,
        },
        {
            "type": "custom:modern-circular-gauge",
            "entity": "sensor.living_room_temperature",
            "name": "Living Room",
            "min": 10,
            "max": 40,
        },
        # ... more gauges
    ]
}
```

### Gauge + Graph Side-by-Side

```python
{
    "type": "horizontal-stack",
    "cards": [
        {
            "type": "custom:modern-circular-gauge",
            "entity": "sensor.temperature",
            "name": "Current",
        },
        {
            "type": "custom:mini-graph-card",
            "entity": "sensor.temperature",
            "name": "24h Trend",
            "hours_to_show": 24,
        },
    ]
}
```

### Section with Separator

```python
{
    "type": "vertical-stack",
    "cards": [
        {
            "type": "custom:bubble-card",
            "card_type": "separator",
            "name": "Climate",
            "icon": "mdi:thermometer",
        },
        {
            "type": "grid",
            "columns": 3,
            "cards": [
                # Climate