Ha Dashboard Layouts

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.

{
    "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.

{
    "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.

# 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).

{
    "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.

# 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 - Modern drag-and-drop Sections View (HA 2024+)
• references/layout-card.md - HACS layout-card with CSS Grid and media queries
• references/view-types.md - Masonry, Sidebar, and other view types
• references/responsive-patterns.md - Advanced mobile-first patterns

Common Dashboard Patterns

Temperature Gauges in Grid

{
    "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

{
    "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

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

Official Documentation

• Views - Home Assistant
• Grid card - Home Assistant